L'oggetto frame

Argomenti trattati: i frame della finestra.

I frame possono essere considerati come "finestre" nell'oggetto window. 
Infatti, ogni frame possiede un'URL indipendente da quello della finestra principale, ovvero la finestra nella quale 2 o più frame vengono caricati.

Questo consente di gestire contemporaneamente più documenti in più finestre, che nonostante strutturalmente siano indipendenti gli uni dagli altri, possono però essere collegati e richiamati mediante JavaScript, che permette agevolmente di gestirli.

finestra principale

Considerando questo semplice schema, con 2 frame sovrapposti, i tag HTML che permettono di crearli sono i seguenti:

 E' importante notare, al di là della sintassi HTML che esula dagli scopi di questo sito, come ogni frame abbia un indirizzo a sé stante (SRC="indirizzo frame1" e SRC="indirizzo di frame2") e un nome, necesario ad identificarlo (NAME="frame1" e NAME="frame2").

Per default, cioé a meno che non vi siano indicazioni nel codice HTML che cambino le condizioni normali, un collegamento in un frame apre il collegamento stesso nel frame nel quale era richiamato. Ad esempio, se ho un link a una certa pagina in frame2, cliccando sul collegamento quella pagina sarà caricata in frame2.

Molto spesso però, per varie ragioni, tra cui principalmente quella che uno dei due frame funge da "indice" del sito, nel quale vi sono i vari link disponibili, si è interessati a far sì che la pagina a cui ci si collega non sia caricata nel frame che la richiama, bensì in un altro frame.

Questo è possibile mediante l'attributo TARGET (bersaglio), del tag <A> </A> nel frame che contiene il collegamento. Questo specifica in quale finestra saranno aperti i collegamenti del frame. Nell'esempio esaminato sopra, l'attributo target contiene il nome del frame inferiore, cioé frame2. Pertanto, cliccando su un collegamento in frame1, questo sarà caricato in frame2. Se ci sono più collegamenti su frame1, è inutile scrivere più volte l'attributo target nel tag <A></A>, mentre è più opportuno utilizzare il tag 

<BASE TARGET="frame2">

per evitare inutili ripetizioni, o in caso di disattenzione errori.

visualizza esempio

Si nota anche come i frame considerati non abbiano bordo (questo perché nella finestra principale, nel tag <FRAMESET></FRAMESET> è stato specificato frameborder=0), essendo perciò indistinguibili: sembrerebbe quindi di avere a che fare con un normale documento HTML.

Tenendo presente quanto detto, per riferirsi alla finestra principale mediante il codice JavaScript, è sufficiente utilizzare le proprietà parent o top dell'oggetto window.

Se parent si riferisce alla finestra principale che contiene i frames, possiamo considerarla come un Array, ovvero una sorta di contenitore dei frame in esso posti. I frame sono numerati in JavaScript a partire da zero. E' possibile sfruttare questo modello per riferirsi, all'interno di un frame, sia ad un altro frame contenuto nella stessa finestra, sia alla finestra principale.

Nell'esempio, frame1 è definito dal codice parent.frames[0], mentre frame2 dal codice parent.frames[1]. 

Oppure, per riferirmi direttamente alla finestra principale, utilizzerò top, che si riferisce appunto alla finestra che contiene i frames.

Per comprendere appieno l'utilizzo di JavaScript, sarà simulato un carrello della spesa, per formulare ordini via Internet. Sebbene questo debba essere accostato ad una tecnologia lato server per l'elaborazione degli ordini, ad esempio ASP o CGI, la struttura lato client può venire comodamente affidata al codice JavaScript.

E' utile sottolineare come rappresentando ogni frame una finestra a sé stante, esso sia caratterizzato da tutti gli attributi, le proprietà e i metodi dell'oggetto window, così come il documento in esso contenuto sia caratterizzato da tutti gli attributi, le proprietà e i metodi dell'oggetto document.

Se sono stati caricati i frame nella finestra principale, top, è possibile determinarlo mediante la proprietà top.length. Ad esempio, la proprietà su questa finestra, che non è suddivisa in frame, è zero.

Visualizzandolo tramite un semplice alert:

Riprendendo lo schema iniziale, la finestra principale ed i frame in essa contenuti, possono essere così rappresentati:

 nel senso che è la finestra principale che contiene tutti e due i frames. 
La situazione però può un pò complicarsi.  Un caso ancora semplice, ma spesso presente, è costituito da 3 frames:

 Caricando la pagina, un semplice alert(top.length) ci segnala che la finestra principale top contiene 3 frames.

Carica

Molto spesso però, la suddivisione è ancora più complessa. Ad esempio, un frame potrebbe a sua volta contenere dei frames. In questo caso, diventerebbe rispetto ad essi la finestra principale.
Come è stato detto in precedenza, i frame possono essere richiamati anche mediante il nome loro dato.
Dato il codice HTML appena esaminato, se si vuole scrivere in f1, a partire da f2, possiamo scrivere il seguente codice in f2:
onload="top.f2.document.write('PROVA')";

Prova

E' anche possibile modificare dinamicamente il target, o eventualmete l'attributo HREF, di un link nei frame. Visualizzate il seguente esempio, cliccando prima sul link superiore, poi sul link inferiore:

Carica 

E' inoltre possibile gestire le variabili JavaScript tra la finestra principale ed i frame in essa contenuti.

Volendo ad esempio sapere il valore di una variabile miavar dichiarata e assegnata nella finestra contenente i frames, è possibile farlo ricorrendo al codice:
parent.miavar;

Queste considerazioni possono essere utili per offrire più possibilità di visualizzazione all'utente.

Internet Explorer permette anche la creazione di iframe, che permettono la gestione dei livelli separati nel documento principale.

Torna all'inizio | Home