JavaScript risulta molto utile anche quando si debba gestire una struttura a frame. I frame sono infatti strutture ampiamente utilizzate in numerosi siti web perché permettono di suddividere la finestra del browser Internet in più sottoaree. Ciascuna di esse può gestire i suoi contenuti in modo del tutto autonomo, senza dipendere dalle altre. In questo modo è possibile pensare di tenere fissa una porzione del documento evitando che il browser debba ricaricare, ad ogni refresh, l’intera pagina.
JavaScript offre tutta una serie di strumenti che permettono di interfacciarsi con i frame HTML e quindi di facilitarne la gestione.
Vediamo, ad esempio, come è possibile aggiornare due frame diversi con un solo clic del mouse.
In primo luogo, creiamo un normale file HTML. Tale file non avrà bisogno dell’aggiunta di alcun codice JavaScript: al suo interno porremo solo alcuni conosciuti tag HTML che consentiranno di attribuire alla nostra pagina web una struttura a frame.
Creiamo un nuovo file HTML attribuendogli il nome frame.html. Incolliamo, quindi, al suo interno, il codice HTML che segue:
<html>
<frameset rows="30%,*" frameborder="1">
<frame name="frame_sup" src="frame_superiore.html">
<frame name="frame_inf" src="frame_inferiore.html">
</frameset>
</html>
Esempio 9 - frame.html
La pagina web sarà suddivisa in due sezioni: la prima, quella superiore, occuperà il 30% dello spazio a disposizione sull’asse verticale ed ospiterà il file frame_superiore.html; la seconda, l’area più in basso, lo spazio restante (al suo interno verrà collocato il contenuto del file frame_inferiore.html).
I nomi assegnati ai file che ospitano il contenuto dei frame non sono importanti mentre lo sono i parametri name indicati in ciascun tag <frame>: si tratta infatti di apposite “etichette” che debbono essere ricordate se si vuole interagire correttamente con i frame da JavaScript.
Mentre nel file frame_superiore.html abbiamo inserito semplicemente il codice HTML per la visualizzazione del logo della rivista, frame_inferiore.html contiene una funzione JavaScript che abbiamo denominato modifica_frame.
function modifica_frame() { parent.frame_sup.location.href="frame_superiore_2.html"
parent.frame_inf.location.href="frame_inferiore_2.html" }
Le due istruzioni JavaScript stabiliscono quali file HTML devono essere caricati in ciascun frame. Notare che nel frame di nome frame_sup viene inserito il contenuto del file frame_superiore_2.html, mentre in frame_inf il codice HTML di frame_inferiore_2.html.
La funzione JavaScript per la modifica del contenuto dei frame viene invocata mediante l’evento Onclick, associato al pulsante Modifica contenuto frame.

Per documentarvi ulteriormente sull’utilizzo dei frame HTML, vi consigliamo di visitare la pagina seguente: http://www.w3.org/TR/REC-html40/present/frames.html (in inglese).
Il nostro esempio è reperibile sul CD ROM di PC Open (file frame.html, frame_superiore.html, frame_inferiore.html, frame_superiore_2.html, frame_inferiore_2.html).
|