Introduzione a JavaScript
Introduzione a JavaScript
Part 3
Frames e JavaScript.
Ecco l' HTML :
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frtest1.htm" name="fr1">
<FRAME SRC="frtest2.htm" name="fr2">
</FRAMESET>
</HTML>
Per prima cosa occorre dire al browser quanti frames si vuole visualizzare. Questo � definito nel tag <frameset...> . Le istruzioni da utilizzare sono cols e rows per creare rispettivamente colonne e righe. Le istruzioni <frameset...> possono essere annidate:
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
</FRAMESET>
Si sono create due colonne e la seconda �
stata divisa in 3 parti uguali.
Quando si utilizza JavaScript � importate utilizzare i nomi dei
frames.
Un altro esempio:
Questo mostra come � possibile scrivere alcuni frasi di testo in un determinato frame mediante la pressione di un pulsante.
Ecco il sorgente:
frames.htm
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frame1.htm" name="fr1" noresize>
<FRAME SRC="frame2.htm" name="fr2">
</FRAMESET>
</HTML>
frame1.htm
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function hi() {
document.write("Hi!<br>");
}
function yo() {
document.write("Yo!<br>");
}
function bla() {
document.write("bla bla bla<br>");
}
// -->
</script>
</HEAD>
<BODY>
This is our first frame!
</BODY>
</HTML>
frame2.htm
<HTML>
<body>
This is our second frame!
<p>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Hi" onClick="parent.fr1.hi()">
<INPUT TYPE="button" VALUE="Yo" onClick="parent.fr1.yo()">
<INPUT TYPE="button" VALUE="Bla" onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>
L'utente carica il primo file (frames.htm), questo crea i frames e carica il file frame1.htm nel primo frame ('fr1') e frame2.htm nel secondo frame ('fr2'). Il primo frame1.htm contiene alcune functions di JavaScript, ma non sono chiamate all'interno del file frame1.htm ma da frame2.htm.! I bottoni presenti in frame2.htm lanciano le funzioni definite in frame1.htm; la propiet� onClick ora include : parent.fr1... che cosa significa ? frame1.htm e frame2.htm sono caricati dalle istruzioni del file frames.htm, frames.htm � chiamato 'parent' (dgli altri due). Coseguentemente i nuovi 3 frames sono i 'child- frames' (di frames.htm).
frames.htm parent
/ \
/ \
/ \
fr1(frame1.htm) fr2(frame2.htm) children
Si pu� estendere questo concetto creando un 'grandchildren' in questo modo:
frames.htm parent
/ \
/ \
/ \
fr1(frame1.htm) fr2(frame2.htm) children
/ \
/ \
/ \
gchild1 gchild2 'grandchildren'
Se si vuole far riferimento a funzioni definite in 'parent', occorre indicare parent prima del nome della function. Se invece si vogliono chiamare functions definite in frame1.htm devo specificare anche fr1. (fr1 � il nome che si era assegnato, all'interno di frames.htm, ad un frame specifico ). Quindi, come si pu� notare anche dal grafico, non ci sono connessioni dirette tra i files frame1.htm e frame2.htm, quando chiamo (da frame2.htm) functions definite in frame1.htm, devo per forza indicarle passando attraverso il 'frame parent' :
<...
onClick="parent.fr1.hi()">
<... onClick="parent.fr1.yo()">
<... onClick="parent.fr1.bla()">
� possibile cancellare i frames una volta creati ?
Certamente:
basta aggiungere TARGET="_top" al tag <a
href...> .
Es.:
<a href="goaway.html" TARGET="_top">Clicca qui per uscire dai frames</a>
Ultimo aggiornamento: