Introduzione a JavaScript

Introduzione a JavaScript
Parte 3

Molte persone mi chiedono come utilizzare i frame con Javascript. Per usare i frane con Javascript è necessario avere Netscape Navigator 2.0, per il momento. Ci sono altri browser che attualmente supportano i frame, ma in genere non supportano Javascript. Penso comunque che non ci vorrà molto tempo perché altri browser supportino sia i frame che Javascript.
Per prima cosa voglio dirvi due parole sui frame. Molte documentazioni su HTML non contengono nulla sui frame perché sono elementi abbastanza recenti. L'uso dei frame vi permette di 'dividere' la vostra finestra visualizzando le pagine HTML in più parti. Avete così delle parti indipendenti nella stessa finestra e potete caricare pagine differenti nei vari frame. Una bella idea consiste nel far interagire questi frame, cioè fare in modo che possano scambiarsi informazioni a vicenda. Per esempio potreste creare 2 frame: uno con la vostra normale pagina HTML e l'altro con una toolbar. La toolbar potrebbe contenere i pulsanti per la navigazione tra le vostre normali pagine HTML. La toolbar sarà sempre visibile, anche quando un'altra pagina HTML viene caricata nell'altro frame.
Prima voglio mostrarvi come apparirebbe una tale finestra, quindi cliccate sul pulsante e osservate quanto appare (Se state leggendo questa pagina online, dovete attendere un attimo quando cliccate sui pulsanti in questa parte del tutorial perché gli script vengono caricati dal server).

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.

Sommario - Parte 1 - Parte 2 - Parte 4 - Parte 5 - Parte 6 - Parte 7