| ||||||||||||||||
 StaffScripts Frame dinamico | |||||||||||||||||||||||||
| Autore: Riccardo | Data: 08/08/2002 | Downloads: 972 | Voto: 2,5/5 | Download | P r o v a | ||||||||||||||||||||
|
Frame Dinamico
In pieno agosto (per chi c'è! :-) un "trucco" più che uno script per superare una situazione in cui non è raro trovarsi quando si sviluppa un sito con dei frames: la necessità di aprire alcune pagine "a tutto frame" insieme ad altre che hanno bisogno di svilupparsi in un frameset.
Una situazione tipica in cui può presentarsi questa necessità è quella del sito vetrina di un'azienda in cui si sviluppa il sito con due frames: uno (quello in alto nell'esempio) in cui ci sono il menu con i link principali e l'altro in cui vengono presentate le pagine di servizio, profilo, contatti, prodotti etc. Proprio la presentazione dei prodotti può richiedere la necessità di sviluppare altri due frames, uno con l'elenco dei prodotti, e l'altro con le varie descrizioni. La soluzione che vi propongo è quella di delegare ad uno script la creazione del frameset interno in cui verranno caricate le pagine necessarie. In pratica i links in alto caricheranno una pagina HTML con "target" il frame basso (che nell'esempio ha NAME="contenuti"). Quando linkeremo una pagina HTML normale: <A HREF="sotto.html" TARGET="contenuti">Ricarica pagina principale</A>otterremo il solito risultato di aggiornare il frame, ma se nel link carichiamo la pagina "frame.html" passandogli come parametri i nomi delle pagine da aprire: 1) <A HREF="frame.html?elencolibri&libro1" TARGET="contenuti">Libri</A> vedremo crearsi al posto della pagina precedente un frame con le nuove pagine. L'uso di uno script eviterà la necessità di creare varie pagine di frameset e di doverle aggiornare singolarmente se decidiamo di modificarne la struttura. Sarà infatti sufficiente modificare l'unica pagina frame.html per cambiare le caratteristiche della vetrina. La pagina frame.html è composta da pochissime righe fra tag e script: <HTML> <HEAD> <TITLE>Frameset Dinamico</TITLE> <SCRIPT> <!-- function carica() { var Where = location.search.substr(1).split("&"); if (Where.length > 1) { sinistra.location.href=Where[0]+".html"; destra.location.href=Where[1]+".html"; } } //--> </SCRIPT> </HEAD> <FRAMESET COLS="200,*" onLoad="carica()"> <FRAME NAME="sinistra" SRC="about:blank"></FRAME> <FRAME NAME="destra" SRC="about:blank"></FRAME> </FRAMESET> </HTML>Il frameset, in basso, verrà creato con un qualsiasi editor HTML, nell'esempio ho omesso (per brevità) le varie personalizzazioni di margini, bordi eccetera. Quel che è strettamente necessario è il NAME che si userà normalmente con l'attributo TARGET dei links, ed il documento precaricato che sarà about:blank, cioè una pagina vuota che consentirà alla pagina di caricarsi velocemente. Lo script infatti agisce al caricamento della pagina, invocato dall'event-handler onLoad nel tag di apertura del frameset. Così come succede se viene inserito nel tag <BODY ...> consentirà l'esecuzione della funzione associata nel momento in cui il browser ha finito di ricevere ed impaginare il documento. Tornando un attimo al link d'esempio 1) vediamo che alla pagina frame.html vengono passati dei parametri nella location. I parametri passati altro non sono che i nomi delle pagine HTML che desideriamo caricare nel frameset. Lo script, all'esecuzione della funzione carica(), cattura i parametri ricevuti tramite location.search, elimina il punto interrogativo iniziale (.substr(1)) e suddivide la stringa in un array di due elementi spezzandola attorno al carattere "&" (.split("&")). L'array risultante viene associato alla variabile Where che così contiene nei suoi due elementi i nomi delle pagine desiderate. Ottenuto l'array, la funzione controlla di aver ricevuto almeno due elementi (Where.length dovrà essere almeno uguale a 2) ed in caso affermativo modifica la location dei due frames caricando nel frame di sinistra la pagina indicata dall'elemento 0 (primo parametro ricevuto) ed in quello di destra la pagina indicata dall'elemento 1 (il secondo parametro). Il lavoro dello script termina qui. Dalle pagine caricate sarà possibile poi continuare la navigazione facendo riferimento al nome del frame di destra (o di sinistra) con il consueto TARGET del link HREF. La pagina d'esempio con l'elenco dei libri contiene dei normali link HREF con target al frame di destra. Chi volesse maggiori informazioni sull'uso di location.search può leggere il tutorial pubblicato qualche mese fa: Leggi il tutorial. | |||||||||||||||||||||||||
| |||||||||||||||||||||||||
| Per navigare correttamente il sito è necessario abilitare i cookies. |
| Enjoy Open Source! |
Stampa
Segnala 
Preferiti 
