Con lo script che presentiamo creeremo una finestra popup con link che si chiude automaticamente quando uno dei collegamenti viene attivato e aperto nella finestra principale. La visualizzazione dell'esempio allegato chiarirà meglio il funzionamento e suggerirà i migliori ambiti di utilizzo.
Lo script si compone di due parti. Ciascuna va inserita nella sezione <head></head> della pagina principale e della piccola finestra popup.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
Iniziamo dalla pagina principale, 'esempio.htm'. Nella sezione <head></head> troviamo queste righe di codice Javascript:
<script type="text/javascript" language="javascript">
function ShowMenu(URL, WinTitle, Winwidth, Winheight, WinLeft, WinTop){
attr = "resizable=no,width=" + Winwidth + ",height=" + Winheight + ",screenX=" + WinLeft + ",screenY=" + WinTop + ",left=" + WinLeft + ",top=" + WinTop + "";
msgWindow=open(URL, WinTitle, attr);
if (msgWindow.opener == null) msgWindow.opener = self;
}
</script>
Chi ha minima esperienza di Javascript riconoscerà un tipo di funzione molto comune: quella usata per l'apertura di finestre popup. La funzione 'ShowMenù riceve come parametri gli elementi caratterizzanti della finestra che apriremo: l'URL, il titolo, la larghezza, l'altezza, la posizione sullo schermo indicata dalle coordinate Left e Top). Tutti i parametri vengono prima concatenati e quindi assegnati alla variabile 'attr'. L'ultima istruzione si occupa dell'apertura.
Questa parte va lasciata intatta.
## 2: LA SEZIONE HTML
Sempre nel file esempio.htm (la pagina principale) troviamo un elemento fondamentale nel corpo della pagina. Si tratta di costruire un link che attivi la funzione e passi i parametri. Eccolo:
<p><a href="javascript:ShowMenu('popup.html','window1',160,100,2,95)">Le guide di HTML.it</a>.</p>
L'URL punta al file 'popup.html', la finestra si chiama 'window1', le sue dimensioni sono 160x100, comparirà nell'angolo superiore sinistro dello schermo.
Fatto. Si può ora passare all'analisi di popup.html.
popup.html
Nella sezione <head></head> troviamo un'altra porzione di Javascript:
<script type="text/javascript">
function ChangeMenu(file){
top.opener.window.location.href = file;
window.close();
}
</script>
La funziona è semplicissima. Prende come parametro l'indirizzo del documento da aprire nella pagina principale (lo passeremo con un link). Quindi stabilisce che tale documento andrà aperto nella finestra 'opener', ovvero in quella da cui è stato generato il popup. Quindi, si chiude.
Nel corpo della pagina troviamo una serie di link che richiamano la funzione 'ChangeMenù:
<p><a href="javascript:ChangeMenu('https://www.html.it/guida/')">Guida HTML</a></p>
Si noti solo la forma del link e il passaggio come parametro dell'indirizzo da caricare.
