L'avanzare delle tecnologie legate allo sviluppo di nuovi e sofisticati browser Web, o il miglioramento di quelli già esistenti, ha consentito agli sviluppatori di lavorare con una certa tranquillità con la tecnologia rappresentata dai frame, il pericolo di non vedere una pagina divisa in frameset sembra essere cessato.
Rimane purtroppo a carico dello sviluppatore, ed a questo non c'è rimedio, l'incombenza di dover specificare determinati tipi di funzionamento, di tipo stilistico e funzionale, in maniera meno agevole di quanto una pagina, o un sito, non diviso in una serie di frameset consente.
Lo scopo di questo tutorial non è quello di insegnare ad utilizzare i frame, si suppone che il lettore conosca a sufficienza questa particolare tecnologia messa a disposizione dall'Html, comunque, per venire in contro ai meno avvezzi, costruiremo insieme una pagina di prova che utilizzeremo in tutti gli esempi che incontreremo.
Costruzione del frameset di prova
Creiamo una cartella che chiameremo frames che conterrà tutti i file degli esempi che implementeremo in questa sede, all'interno creiamo il file index.htm che divideremo in tre frameset, non è importante includere gli stessi file e nominare i singoli frame nello stesso modo in cui farò io, ma per lavorare più agevolmente con i codici che andremo a presentare, consiglio di utilizzare le stesse diciture.
Analizziamo brevemente il codice Html:
<html>
<head>
<title>Gestione dei frame con Javascript</title>
</head>
<frameset rows="80,*" border="3">
<frame src="intestazione.htm" name="intestazione" noresize scrolling="no">
<frameset cols="150,*" border="no">
<frame src="menu.htm" name="menu" noresize scrolling="no">
<frame src="principale.htm" name="principale" noresize scrolling="auto">
</frameset>
</html>
Abbiamo creato la classica pagina divisa in frame, ovvero con un frame superiore in orizzontale che abbiamo chiamato intestazione in cui si potrà disporre un logo del sito sulla sinistra ed eventualmente un banner pubblicitario sulla destra, un frame in verticale sulla sinistra che abbiamo chiamato menu in cui disporremo un menu in verticale ed eventualmente altri accessori di navigazione, ed in fine l'area principale che ospiterà il contenuto reale del sito, il cui nome assegnato è principale.
Vediamo che aspetto avrà la struttura della pagina appena creata:
| intestazione | |
| menu | principale |
Nei vari frameset inseriremo i seguenti file, come deducibile dal codice appena presentato, che avranno lo scopo di:
1. intestazione.htm - contenere logo ed eventuale banner
2. menu.htm - contenere il menu ed eventuali utility di navigazione
3. principale.htm - esporre il reale contenuto del sito.
L'oggetto parent
Javascript, per lavorare con i frame, ci mette a disposizione l'oggetto parent.
Presentiamo un primo banale esempio, supponiamo di avere una casella di testo ed un bottone di invio nel menu nel frameset sinistro e di voler stampare a video il testo, memorizzato nella variabile di tipo string, nel frameset principale.
Apriamo il file index.htm che abbiamo suddiviso in frame, apriamo il codice del file menu.htm ed inseriamo il seguente modulo appena descritto:
<form name="modulo">
<input type="text" name="testo_da_inserire">
<input type="button" value="Invia" onClick="ScriviTesto()">
</form>
Vediamo il codice a cui si riferisce la funzione ScriviTesto() richiamata nell'evento onClick sul bottone di invio:
<script language="javascript">
<!--
function ScriviTesto() {
var testo = modulo.testo_da_inserire.value;
parent.principale.document.write(testo);
}
//-->
</script>
All'oggetto parent va associato il nome del frame di destinazione, più la funzione in oggetto, in questo caso il document.write().
Stampare il contenuto di un altro frameset
Conclusa questa panoramica sull'oggetto parent, passiamo ad analizzare qualche suo, utilizzo più concreto e funzionale, volendo, un esempio come quello mostrato in precedenza può tornare utile a chi volesse inserire in un frameset un motore di ricerca interno per keywords e visualizzare i risultati su di un'altro frameset.
Esigenza molto comune è quella di effettuare stampe lanciando il comando da un frameset diverso da quello che si desidera stampare.
Sempre riferendoci al file index.htm, inseriamo nella pagina principale un testo o delle immagini da stampare, e da uno dei due altri frameset, ad esempio da intestazione.htm, tanto per cambiare un po, lanciamo il comando di stampa:
<div><a href="javascript:void(0)" onClick="Stampa()">Stampa la pagina sottostante</a></div>
la funzione Stampa() avrà il seguente codice:
<script language="javascript">
<!--
function Stampa() {
parent.principale.focus();
window.print();
}
//-->
</script>
La funzionalità di questa funzione verte sull'impostazione del focus sul frameset che si desidera stampare, seguito ad vero e proprio comando di stampa.
Aprire un file sempre nel frameset originale
Un grosso problema in cui si rischia di incorrere utilizzando la tecnologia dei frame per un sito è quella di trovare su un motore di ricerca pagine indicizzate ed estratte dal database che, una volta aperte, non compariranno nel frameset originale, nel nostro caso index.htm, rischiando di perdere il senso grafico del lavoro, oppure aprendo file che da soli sembrano non aver senso, come il menu o l'intestazione.
Javascript permette di risolvere questo non indifferente problema con un semplicissimo script da includere in tutti i file del sito, naturalmente escluso il frameset index.htm.
Per evitare un domani di dover correggere pagina per pagina lo script in caso di doverosi cambiamenti strutturali del sito, ad esempio se il file iniziale non dovesse più chiamarsi index.htm bensì default.htm, includiamo lo script in un file esterno, ad esempio apri_frames.js, e lo richiamiamo su tutte le pagine tra i Tag <head> e </head>, come predetto:
<script language="javascript" src="apri_frames.js"></script>
oppure fornendo il percorso relativo o assoluto del file.
Il seguente codice rappresenta lo script che utilizzeremo per lo svolgimento della suddetta funzione:
if (window.location == parent.location) {
location.href = "http://www.server.it/index.htm";
}
Impostiamo lo script al caricamento della pagina, imponendo che se l'indirizzo assoluto del file appena aperto è uguale all'indirizzo di un file che viene richiamato in un frameset, allora creeremo un link verso il file index.htm in cui abbiamo costruito i frameset, abbiamo utilizzato un indirizzo assoluto, possiamo anche solo utilizzare il nome del file senza l'URL completo, ma non sapendo come si comportano i vari motori di ricerca, rischieremmo di incorrere in un errore 404, ovvero file non trovato, consiglio quindi di utilizzare il path completo come nell'esempio.
Insomma, grazie all'oggetto parent possiamo comodamente lavorare con i frame, ottenendo funzionalità che col semplice Html non potremmo sfruttare, presento ora una carrellata di esempi pratici e di ricorrente utilizzo.
Creazione di una barra di navigazione
Può essere davvero molto comodo disporre dei classici pulsanti "Back" e "Next" in una barra di navigazione posizionata in un frameset, avendo su di un altro frameset, sfruttiamo le funzioni history.back() e history.forward() associate all'oggetto parent, creiamo la barra composta da questi due classici link nel frameset menu verso il principale:
<div align="center">
<a href="javascript:parent.principale.history.back()">Back</a> ::
<a href="javascript:parent.principale.history.forward()">Next</a>
</div>
Chiudere una popup contenente un frameset
Supponiamo di avere una finestra di tipo pupup contenente un frameset, impostando il classico comando di chiusura window.close() su una delle pagine contenute nel frameset nella popup, il browser tenterà di chiudere solo quel singolo file, cosa impossibile, quindi l'output della funzione sarà nullo, per fare ciò utilizziamo l'oggetto parent in questo modo:
<div><a href="javascript:parent.close()">Chiudi questa finestra</a></div>
Aggiornare due o più frames con un solo click
Ipotizziamo la situazione in cui abbiamo necessità di implementare un link che cambi due file in due frameset, facendo partire da un terzo frameset il comando, per restare fedeli al frameset costruito all'inizio del tutorial, ovvero index.htm, ipotizziamo di voler aggiornare i file intestazione.htm e principale.htm, linkando dal file menu.htm, questo è il codice dello script:
<script language="javascript">
<!--
function AggiornaFrames() {
parent.principale.location.href = "pagina1.htm";
parent.principale.location.href = "pagina2.htm";
}
//-->
</script>
Questo è il link:
<div><a href="javascript:AggiornaFrames()">Testo del link</a></div>
L'oggetto parent in Html
Nella definizione dei link in html abbiamo l'attributo target del Tag area che ci consente di impostare il link in questione verso una nuova istanza del browser, oppure verso un frameset, in questo caso utilizzeremo come valore di target il nome del frameset di destinazione.
Possiamo utilizzare l'attributo _parent per eliminare i frame correnti ed aprire nella stessa istanza del browser una pagina non contenente frame.
Più presto a farsi che a dirsi, includiamo questo link Html nel file principale.htm:
<div><a href="http://www.lukeonweb.net" target="_parent">Vai a lukeonweb.net</a></div>
Utilissimo anche nel caso in cui vogliamo inviare i dati di un form ad una pagina, ad esempio Asp, che li elaborerà, inseriamo nel Tag <form> il target al frameset desiderato:
<form name="modulo" action="elabora_dati.asp" method="post" target="principale">
Gestione dei frame in linea (iframe)
Si suppone che il lettore sappia che i frame in linea, costruiti col Tag <iframe>, si differenziano dai normali frame per il fatto che sono considerabili come degli elementi Html, come ad esempio un'immagine, che richiamano un file Html invece che un'immagine Gif o Jpeg... se il lettore non lo sapeva, ora lo sa :-)
L'utilizzo dell'oggetto parent nei confronti dei frame in linea è pressocchè analogo a quello dei normali frame, voglio fornire al lettore un trucco per gestire i frame in linea in base a delle condizioni, ad esempio stabilendo una diversa dimensione a seconda della risoluzione, nel caso specifico vogliamo che se la risoluzione è minore o uguale a 800X600 il frameset sarà alto 300 pixel, altrimenti, se maggiore, sarà 450 pixel:
<script language="javascript">
<!--
var iframe = "<iframe src='nome_file.htm' name='esempio' frameborder='0' scrolling='auto' width='400' ";
if ((window.screen.width <= 800) && (window.screen.height <= 600)) {
document.write(iframe + "height='300'>");
}
else {
document.write(iframe + "height='450'>");
}
//-->
</script>
Naturalmente implementeremo questo script nel body, nel punto in cui vogliamo che compaia il frame in linea.
Concludo questa panoramica sui frame e sull'utilizzo dell'oggetto parent con la raccomandazione di non abusare dei frame per la creazione di siti, le recensioni in materia delle più autorevoli fonti competenti li definiscono "poco funzionali" e "poco professionali".
