Il Javascript che presentiamo questa settimana permette di caricare contemporaneamente 4 differenti pagine ad un unico link in altrettanti frame. La sua peculiarità principale, quindi, non è quella di caricare più pagine con un click, ma di racchiuderle tutte in una singola finestra divisa in 4 frame. Lo script riprende alcuni concetti dei frame e chiaramente li manipola attraverso sintassi Javascript.
Il file si compone di 10 file:
- esempio.htm
- 01.htm
- 02.htm
- 03.htm
- 04.htm
- 05.htm
- 06.htm
- 07.htm
- 08.htm
- errore.htm
Per una più semplice comprensione del presente script fai continuamente riferimento al file sopracitato, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
esempio.htm
Anche se questo esempio si compone di molti file, soltanto questo va modificato per ottenere l'effetto desiderato. I file numerati da 01.htm a 08.htm non sono altro che pagine di prova, il cui unico scopo è quello di fornire un esempio pratico e venire caricate all'interno dei frame.
La prima parte del codice Javascript di questo esempio va inserita tra gli elementi <head> del documento, e serve ad impostare le due principali funzioni: "make4windows()" e "getCheckedPages()".
Questo il codice integrale da inserire tra i marcatori <head>:
<script type="text/javascript" language="javascript">
if (window != window.top)
top.location.href = location.href;
x1="no",x2="no",x3="no",x4="no",x5="no",x6="no",x7="no",x8="no",d=""
y = new Array()
function make4windows() {
lt="errore.htm"
lb="errore.htm"
rt="errore.htm"
rb="errore.htm"
if (y[0]) lt=y[0]
if (y[1]) lb=y[1]
if (y[2]) rt=y[2]
if (y[3]) rb=y[3]
d+='<frameset cols="50%,*" border=5><frameset rows="50%,*"><frame
src="'+lt
d+='" name="lt"><frame src="'+lb
d+='" name="lb"></frameset><frameset rows=50%,*><frame
src="'+rt
d+='" name="rt"><frame src="'+rb+'"
name="rb"></frameset></frameset>'
document.write(d)
document.close()
}
function getCheckedPages(){
if (document.p.b1.checked==true)y=y.concat("01.htm")
if (document.p.b2.checked==true)y=y.concat("02.htm")
if (document.p.b3.checked==true)y=y.concat("03.htm")
if (document.p.b4.checked==true)y=y.concat("04.htm")
if (document.p.b5.checked==true)y=y.concat("05.htm")
if (document.p.b6.checked==true)y=y.concat("06.htm")
if (document.p.b7.checked==true)y=y.concat("07.htm")
if (document.p.b8.checked==true)y=y.concat("08.htm")
make4windows()
}
</script>
La funzione "make4windows()" è molto importante in quanto stabilisce la formattazione dei frame e imposta i messaggi di errore nel caso in cui una pagina non venga caricata nei frame.
In particolare le righe di codice:
lt="errore.htm"
lb="errore.htm"
rt="errore.htm"
rb="errore.htm"
indicano al browser di caricare all'interno di ogni finestra creata (alla quale sono stati assegnati nomi come: lt, lb, rt e rb) il documento "errore.htm" quando non è stato specificato altrimenti. In altre parole se su 4 pagine ne vengono spuntate tre, il frame rimasto senza pagina si vedrà assegnato di default la pagina "errore.htm".
Successivamente vengono stabilite la grandezza e le peculiarità del frameset:
d+='<frameset cols="50%,*" border=5><frameset rows="50%,*"><frame src="'+lt
d+='" name="lt"><frame src="'+lb
d+='" name="lb"></frameset><frameset rows=50%,*><frame src="'+rt
d+='" name="rt"><frame src="'+rb+'" name="rb"></frameset></frameset>'
Da questo codice si evince che la pagina viene divisa in un frame verticale (frameset cols) e uno orizzontale (frameset rows), entrambi di valore assoluto pari al 50% dello spazio disponibile. Questa scelta genera una finestra divisa in quattro parti uguali, che si adattano allo schermo in base alla risoluzione dello schermo.
Il bordo dei frame è stabilito nella misura di 5 pixel.
La funzione "getCheckedPages()" indica le 8 pagine (da 01.htm a 08.htm) che potranno essere caricate all'interno dei 4 frame. I file .htm di riferimento possono sostituirsi con URL assoluti o immagini.
Impostato il codice tra gli elementi <head> è necessario inserire la seguente sintassi nel punto del documento dove si vuole visualizzare la scelta delle pagine da caricare:
<form name=p>
<table class="tabella" border=1 cellpadding=5>
<tbody>
<tr>
<td><input name=b1 type=checkbox>01</td>
<td><input name=b2 type=checkbox>02</td>
<td><input name=b3 type=checkbox>03</td>
<td><input name=b4 type=checkbox>04</td></tr>
<tr>
<td><input name=b5 type=checkbox>05</td>
<td><input name=b6 type=checkbox>06</td>
<td><input name=b7 type=checkbox>07</td>
<td><input name=b8 type=checkbox>08</td>
</tr>
</tbody>
</table>
<a href="javascript:getcheckedpages()"><strong><font
face=arial>carica le pagine</font></strong></a>
</form>
Ogni campo <input> rappresenta una finestra da caricare e il tipo di scelta "checkbox" permette di scegliere 4 tra le opzioni possibili.
All'ancoraggio finale viene collegato un riferimento alla funzione "getCheckedPages" vista in precedenza, cosicchè alla pressione del link vengono caricati i 4 documenti scelti.
