scusa se copio/incollo ma vado di fretta


Il problema principale che deve affrontare un webmaster, nel realizzare un sito con frames, è quello di far sì che l'utente visualizzi sempre l'intera struttura del frameset, a prescindere dalla pagina da cui si accede.
Come sappiamo, infatti, entrare da una pagina secondaria (come spesso accade proveniendo da una ricerca su qualche motore) potrebbe significare non visualizzare i frame nei quali sono contenuti i menù con i link di navigazione (in questo modo il sito risulta non navigabile!).
Già in passato avevamo visto una possibile soluzione (http://www.html.it/mailing/archivio/30/) ma lo script di questa settimana si distingue per semplicità d'uso ed efficacia.
Il codice è stato scritto da un forumista di Html.it, Marco Cavicchioli, che ne ha gentilmente concesso l'utilizzo senza alcuna forma di copyright.




Il file allegato a questa mail "jscript_040302.zip" si compone di 7 file (esclusi i file "htmlit.gif" e "jscript_040302.txt"):

frameset.htm
sx.htm
top.htm
center.htm
pagina1.htm
pagina2.htm
sfondo.gif



Per una piu' semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarita' di questo Javascript.



>>>>>>>>>>>>>>>> esempio <<<<<<<<<<<<<<<<<<



Lo script è semplicissimo da spiegare ma estremamente efficace.
Supponiamo di avere un frameset strutturato in questa maniera:
-----------------------
- 1 frame superiore
- 1 frame laterale sinistro
- 1 frame centrale
-----------------------

La struttura in html sarà così scritta:
-----------------------
<frameset cols="150,*" frameborder="NO" border="0" framespacing="0">
<frame name="leftFrame" scrolling="NO" noresize src="sx.htm">
<frameset rows="90,*" frameborder="NO" border="0" framespacing="0">
<frame name="topFrame" scrolling="NO" noresize src="top.htm" >
<frame name="mainFrame" src="center.htm">
</frameset>
</frameset>
-----------------------


Pensiamo, adesso, ad utente che entri direttamente nella pagina "center.htm". In questa situazione non verrebbe visualizzato il menù contenuto nel frame sinistro e la navigazione sarebbe impossibile.

Il problema si risolve facilmente poche linee di codice javascript, inserite tra i tag <head> di tutte le pagine che saranno aperte nel "mainFrame".
Ad esempio prendiamo il file "center.htm" e scriviamo quanto segue (tra i tag <head>):
-----------------------------
<script>
//No Copyright, by MarcoCavicchioli.it
if (self.name==top.name)
{
document.write('<frameset cols="150,*" frameborder="NO" border="0" framespacing="0"> ')
document.write('<frame name="leftFrame" scrolling="NO" noresize src="sx.htm">')
document.write('<frameset rows="90,*" frameborder="NO" border="0" framespacing="0"> ')
document.write('<frame name="topFrame" scrolling="NO" noresize src="top.htm" >')
document.write('<frame name="mainFrame" src='+document.location.href+'?a>')
document.write('</frameset>')
document.write('</frameset>')
}
// MarcoCavicchioli.it - http://www.marcocavicchioli.it/
</script>
-----------------------------

Questo codice pone una condizione al caricamento della pagina "center.htm"; forzando un po' la mano potrebbe essere interpretato in questa maniera:
"Se, al caricamento della pagina, quest'ultima non è contenuta all'interno di frames ma è stata richiamata singolarmente, ricostruisci la struttura del frameset con l'istruzione document.write"

La personalizzazione è semplice e richiede di scrivere lo schema a frames del sito sostituendo al parametro "src", nella riga relativa al frame in cui vengono visualizzate le pagine, la stringa "src='+document.location.href+'?a>'".
Spieghiamo con un esempio pratico:

- nel caso di "center.htm" vediamo che il documento fa parte del "mainFrame". La struttura del frameset, quindi, sarebbe quella vista in precedenza e cioè:
---------------------------------
<frameset cols="150,*" frameborder="NO" border="0" framespacing="0">
<frame name="leftFrame" scrolling="NO" noresize src="sx.htm">
<frameset rows="90,*" frameborder="NO" border="0" framespacing="0">
<frame name="topFrame" scrolling="NO" noresize src="top.htm" >
<frame name="mainFrame" src="center.htm">
</frameset>
</frameset>
---------------------------------

Abbiamo detto, però, di voler fare in modo che, anche caricando singolarmente "center.htm", questa pagina venga inserita automaticamente nel frameset di origine.
Inseriamo quindi, tra i tag <head> di "center.htm", questo codice:
---------------------------------
<script>
//No Copyright, by MarcoCavicchioli.it
if (self.name==top.name)
{
document.write('<frameset cols="150,*" frameborder="NO" border="0" framespacing="0"> ')
document.write('<frame name="leftFrame" scrolling="NO" noresize src="sx.htm">')
document.write('<frameset rows="90,*" frameborder="NO" border="0" framespacing="0"> ')
document.write('<frame name="topFrame" scrolling="NO" noresize src="top.htm" >')
document.write('<frame name="mainFrame" src='+document.location.href+'?a>')
document.write('</frameset>')
document.write('</frameset>')
}
// MarcoCavicchioli.it - http://www.marcocavicchioli.it/
</script>
---------------------------------

Come vedete il 5° document.write contiene la stringa

src='+document.location.href+'?a

e sta ad indicare che deve essere cercato come frame mancante il nome della pagina caricata singolarmente (in questo caso "center.htm").
Lo stesso identico codice (senza nessuna modifica) andrà inserito in tutte le pagine appartenenti al "mainFrame".

Per quanto riguarda il frame superiore e quello sinistro il ragionamento è analogo.
Nella pagina "sx.htm" inseriremo:
---------------------------------
<script>
if (self.name==top.name)
{
document.write('<frameset cols="150,*" frameborder="NO" border="0" framespacing="0"> ')
document.write('<frame name="leftFrame" scrolling="NO" noresize src='+document.location.href+'?a>')
document.write('<frameset rows="90,*" frameborder="NO" border="0" framespacing="0"> ')
document.write('<frame name="topFrame" scrolling="NO" noresize src="top.htm" >')
document.write('<frame name="mainFrame" src="center.htm">')
document.write('</frameset>')
document.write('</frameset>')
}
</script>
---------------------------------

Nella pagina "top.htm" invece:
---------------------------------
<script>
if (self.name==top.name)
{
document.write('<frameset cols="150,*" frameborder="NO" border="0" framespacing="0"> ')
document.write('<frame name="leftFrame" scrolling="NO" noresize src="sx.htm">')
document.write('<frameset rows="90,*" frameborder="NO" border="0" framespacing="0"> ')
document.write('<frame name="topFrame" scrolling="NO" noresize src='+document.location.href+'?a>')
document.write('<frame name="mainFrame" src="center.htm">')
document.write('</frameset>')
document.write('</frameset>')
}
</script>
---------------------------------

Per accelerare il lavoro sarebbe opportuno mettere i diversi codici in file .js esterni da richiamare nelle singole pagine.