Le finestre che abbiamo visto nella lezione precedente sono finestre di sistema. Hanno una grafica minimale e pre-impostata, che di solito va scarsamente d'accordo con un sito dalla grafica accattivante in cui viene studiato ogni minimo particolare. Con JavaScript possiamo creare delle finestre personalizzate che si adattino alle nostre esigenze.
Il codice è il seguente:
window.open('percorso','nome finestra','caratteristiche separate da virgola');
|
Abbiamo quindi la possibilità di specificare tre diversi parametri che ci permettono di creare una finestra che si adatti alle nostre esigenze. Il fatto che ciascun parametro sia indicato tra virgolette (semplici o doppie, non importa) ci dice inoltre che ci troviamo di fronte a delle stringhe (sequenze di caratteri). Ognuno di questi parametri può essere lasciato vuoto, ma la sua presenza va comunque indicata. Così:
// apre una finestra vuota
window.open('','','');
Vediamo un esempio concreto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>esempio</title>
</head>
<body bgcolor="#ffffff" text="#000000" >
<script type="text/javascript">
window.open('http://www.html.it','miaFinestra','');
</script>
</body>
</html>
Come abbiamo visto nel corso delle lezioni precedenti possiamo applicare anche la sintassi JavaScript agli eventi. Ad esempio questa sintassi apre un'ulteriore finestra secondaria al click del mouse. Abbiamo dunque realizzato la possibilità di cambiare due link con un solo click:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>esempio</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" >
<a href="http://pro.html.it"
onClick="window.open('http://www.html.it','miaFinestra','');">
due link on un solo click
</a>
</body>
</html>
Ovviamente è possibile associare la capacità di aprire finestre secondarie anche ad altri eventi. Ad esempio con:
<body onLoad="window.open('http://www.html.it','miaFinestra','');">
la finestra secondaria si apre all'apertura della pagina.
E con:
<body onUnLoad="window.open('http://www.html.it','miaFinestra','');">
la finestra si apre invece alla chiusura della pagina.
È bene però non esagerare con l'apertura selvaggia di finestre secondarie (le cosiddette "pop-up"), perché gli utenti di solito non le amano molto e le chiudono appena possibile. Inoltre esistono alcuni software che consentono all'utente di impedire che i siti web aprano delle finestre secondarie nelle pagine in cui essi stanno navigando.
Per quel che riguarda il secondo parametro (il nome della finestra) è da dire che, se il metodo window.open() viene richiamato due volte all'interno della stessa pagina ed esiste già una finestra con lo stesso nome, non vengono create due differenti finestre, ma viene ricaricato il contenuto della finestra già esistente (e se la seconda finestra ha caratteristiche diverse dalla prima, le nuove caratteristiche vengono ignorate, in quanto la finestra è già stata "formata").
Inoltre se la finestra ha un nome, questo nome può essere usato come valore dell'attributo "target" nei tag "A" e "FORM". È quindi possibile ricaricare il contenuto di una finestra secondaria, semplicemente specificando il "target" del link nella finestra principale. Un esempio chiarirà tutto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>esempio</title>
</head>
<body bgcolor="#ffffff" text="#000000">
<a href="#" onClick="window.open('http://www.html.it','finestra','');">
prima finestra</a><br/>
<a href="#" onClick="window.open('http://pro.html.it','finestra','');">
seconda finestra</a><br/>
<a href="http://freephp.html.it" target="finestra">
ricarica il contenuto</a><br/>
</body>
</html>
Le caratteristiche della finestra le esamineremo nella lezione successiva.
Note a margine
Come i più accorti avranno notato window.open() è anch'esso un metodo dell'oggetto window, come window.alert(), window.confirm() e window.prompt. Più precisamente il metodo window.open() ha quattro argomenti, non tre:
window.open('percorso','nome finestra','carrateristiche separate da virgola','cronologia');
L'ultimo argomento serve solo nel caso in cui il contenuto di una finestra debba essere ricaricato: si può allora specificare se il nuovo valore deve sostituire il valore precedente nella cronologia, o se piuttosto deve essere inserito un nuovo valore nella cronologia. In questo caso (e solo in questo caso) bisognerà specificare:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>esempio</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<a href="#" onClick="window.open('http://www.html.it','finestra','');">prima finestra</a><br/>
<a href="#" onClick="window.open('http://pro.html.it','finestra','',true);">seconda finestra</a><br/>
</body>
</html>
(cancellate la cronologia del vostro browser e osservate l'esempio, inserendo oppure omettendo il quarto parametro). Nella maggior parte delle situazioni in cui vi verrete a trovare il quarto argomento potrà essere tranquillamente omesso.
Ultima considerazione
Per rendere più intuitivi i concetti abbiamo spesso parlato di "parametri". Chi conosce già la programmazione sa che questo è scorretto, molte volte avremmo dovuto parlare di "argomenti". Tuttavia preferisco spiegare soltanto in un secondo momento che cosa sono gli "argomenti" e quindi ho preferito utilizzare una terminologia imprecisa, ma di più immediata comprensione.