Ecco il codice HTML per i frame:
<HTML> <HEAD> <title>Frame</title> </HEAD> <FRAMESET ROWS="50%,50%"> <FRAME SRC="frtest1.htm" name="fr1"> <FRAME SRC="frtest2.htm" name="fr2"> </FRAMESET> </HTML>Come prima cosa occorre specificare quanti frame volete creare, e potete farlo tramite il tag <frameset...>. Specificando le percentuali di righe il browser dividerà la finestra in aree con il corrispondente numero di righe. E' possibile creare delle colonne usando cols invece di rows. E' anche possibile usare diversi tag <frameset...>. Ecco un esempio fornito da Netscape:
<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>
Esso creerà due colonne: la prima sarà divisa
in due parti uguali mentre la seconda sarà divisa in 3 parti uguali.
Le percentuali 50%, 50% nel primo tag <frameset> indica al browser quanto
deve essere grande ciascun frame.
Potete dare dei nomi ai vostri frame e questa è
una cosa importante per l'uso con Javascript. Nel primo esempio potete
vedere come viene associato un nome ad un frame. Usando il tag <frame>
potete indicare al browser quale pagina HTML caricare
Penso che le nozioni elementari relative ai frame siano semplici. Ora diamo un'occhiata al nostro prossimo esempio:
Questo pulsante mostra una finestra in cui è possibile
cliccare su dei pulsanti per scrivere del testo sull'altro frame.
Ecco il sorgente:
Per creare i frame è necessario (frames.htm):
<HTML> <HEAD> <title>Frame</title> </HEAD> <FRAMESET ROWS="50%,50%"> <FRAME SRC="frame1.htm" name="fr1" noresize> <FRAME SRC="frame2.htm" name="fr2"> </FRAMESET> </HTML>Ecco il sorgente di frame1.htm:
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function Ciao() {
document.write("Ciao!<br>");
}
function Ehi() {
document.write("Ehi!<br>");
}
function bla() {
document.write("bla bla bla<br>");
}
// -->
</script>
</HEAD>
<BODY>
Questo è il nostro primo frame!
</BODY>
</HTML>
E ora frame2.htm:
<HTML> <body> Questo è il nostro secondo frame! <p> <FORM NAME="buttonbar"> <INPUT TYPE="button" VALUE="Ciao" onClick="parent.fr1.Ciao()"> <INPUT TYPE="button" VALUE="Ehi" onClick="parent.fr1.Ehi()"> <INPUT TYPE="button" VALUE="Bla" onCLick="parent.fr1.bla()"> </FORM> </BODY> </HTML>Vi ho mostrato un bel po' di script! Cosa fa ciascuno di loro? L'utente carica il primo file (frames.htm). Questo crea i frame e carica il file HTML frame1.htm nel primo frame (chiamato 'fr1') e frame2.htm nel secondo frame (chiamato 'fr2'). Fino a qui abbiamo usato soltanto puro codice HTML. Come potete vedere, il primo file frame1.htm contiene delle funzioni Javascript, ma non sono invocate in quello stesso file. Sono delle funzioni non necessarie? Sono davvero così pigro da non aver cancellato queste inutili funzioni? Contrariamente a quanto si potrebbe pensare, esse non sono del tutto inutili. Sono infatti invocate dal codice contenuto nel secondo file frame2.htm! In questo secondo file abbiamo creato dei pulsanti come abbiamo fatto nella prima parte di questa introduzione. La proprietà onClick è quindi familiare, ma che cosa vuol dire parent.fr1...?
Se avete familiarità con gli oggetti non la considererete una novità. Come abbiamo visto prima, i file frame1.htm e frame2.htm sono invocati dal file frames.htm. Frames.htm viene chiamato il genitore (parent) degli altri due frame. Di conseguenza i due nuovi frame vengono chiamati figli (child) del file frames.htm. Potete vedere che c'è una specie di gerarchia tra i diversi frame. Cercherò di mostrare questa idea con l'aiuto di un piccolo 'grafico' (l'arte ASCII lo descriverebbe molto meglio ...):
frames.htm genitore (parent) / \ / \ / \ fr1(frame1.htm) fr2(frame2.htm) figli (children)Naturalmente è possibile estendere questo concetto: potete creare dei 'nipoti' (se volete chiamarli così - non è l'espressione ufficiale!). Il 'grafico' sarà il seguente:
frames.htm genitore(parent) / \ / \ / \ fr1(frame1.htm) fr2(frame2.htm) figli(children) / \ / \ / \ gchild1 gchild2 'nipoti'Se volete indicare un qualsiasi elemento del frame genitore da frame2.htm basta mettere un parent. prima della funzione che volete invocare. Per indicare le funzioni definite in frame1.htm dal frame genitore occorre mettere un fr1. prima dell'invocazione della funzione. Perché fr1.? Nel codice del frame genitore (frames.htm) abbiamo creato frame differenti ed abbiamo dato loro nomi diversi. Ho scelto fr1 per il primo frame. Il passo successivo è semplice. Come bisogna indicare il primo frame dall'interno di frame2.htm (che contiene il secondo frame chiamato fr2)? Come potete vedere dal mio enorme grafico, non c'è nessuna connessione diretta tra frame1.htm e frame2.htm, quindi non è possibile invocare le funzioni definite in frame1.htm direttamente da frame2.htm. Occorre indicarle tramite il frame genitore. Quindi l'indicazione corretta è parent.fr1. Se volete invocare la funzione Ciao() da frame2.htm scrivete semplicemente parent.fr1.Ciao(). Questo è quello che viene fatto nel secondo script in corrispondenza della proprietà onClick.
Se avete creato dei frame e qualcuno seleziona un link, i frame non scompaiono. Questo va bene se l'utente 'si trova' sulla vostra pagina. Potreste creare una menubar che viene mostrata sempre in un solo frame, per esempio. Ma se l'utente 'salta' in un'altra pagina in Internet, la vostra menubar non serve più. Come cancellare un frame una volta creato?
Basta aggiungere TARGET="_top" al tag <a href...>, come nel seguente esempio:
<a href="vaivia.html" TARGET="_top">se non vuoi più stare nella mia pagina</a>
Naturalmente dovete aggiungere TARGET="_top" ad ogni link
che porta 'fuori'. Se tutti i link della vostra pagina portano 'fouri',
potete anche scrivere <base target="_top"> nell'intestazione della vostra
pagina HTML. Ciò vuol dire che ogni link della pagina cancellerà
i frame.
TORNA
INDIETRO