Un nuova finestra del browser che si apra senza chiudere quella esistente, è una funziona estremamente semplice da ottenere, anche limitatamente ai semplici tag HTML. Senza ricorrere a Javascript, infatti, è sufficiente inserire al tag <a href="link.htm"> un semplice target="_blank". In questo modo, cliccando sul link, la finestra corrispondente verrà visualizzata all'interno di una nuova finestra del browser, e non di quella dove è avvenuto il click. La forma completa di questo comando è:
<a href="link.htm" target="_blank">
La ragione dell'uso di una nuova finestra del browser puo' dipendere da molteplici fattori. Uno di questi è certamente quello di rendere la navigazione più veloce, limitando al massimo l'uso dei classici bottoni "back" o "indietro" del browser. Un altro motivo si ravvisa nei siti che contengono link a risorse esterne, ma che non vogliono perdere per questo dei visitatori. Aprendo una nuova finestra, e soprattutto lasciando aperta quella del sito che contiene il link, il visitatore ha sempre la possibilità di tornare indietro e continuare la sua navigazione.
L'uso del target="_blank" è comunque soggetto ad alcune limitazioni. Eccone alcune:
- non è possibile stabilire le misure (width ed height) della nuova finestra;
- non è possibile scegliere gli elementi di navigazione della status bar.
Javascript ha una soluzione alle due limitazioni, che di seguito andiamo a spiegare e che forse per qualcuno potrà apparire banale, ma che le molte richieste di chiarimenti ricevute, ci spingono a spiegare nei dettagli.
Questo script apre una nuova finestra del browser da un link testuale (che puo' essere sostiuito senza nessun problema da uno d'immagine), ma lo fa secondo dati e direttive che sta a noi impostare. Di seguito vedremo come.
L'esempio si compone di 2 file:
- esempio.htm
- nuova.htm
Per una più 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 peculiarità di questo Javascript.
Il file da visualizzare con il tuo browser è "esempio.htm"
Per modificare lo script secondo le nostre esigenze, dobbiamo agire unicamente su questo file. La sintassi è molto semplice e va inserita all'interno dei tag <head>
<script>
function esempio(str) {
searchWin = window.open(str,'esempio','scrollbars=no,resizable=yes,width=200,height=200,status=no,location=no,toolbar=no');
}
</script>
Abbiamo impostato i parametri tenendo conto che:
scrollbars=no
sta a significare che la nuova finestra non deve avere la barra laterale destra per lo scorrimento, anche se il contenuto della pagina eccedesse lo spazio della finestra. Se il parametro fosse stato impostato su "yes", la barra sarebbe stata sempre visibile, mentre su "auto", lo sarebbe stata solo nel caso in cui il contenuto avesse ecceduto le dimensioni della finestra.
resizable=yes
Indica che la finestra deve essere rimensionabile tramite trascinamento del mouse. L'effetto opposto si ottiene con "no"
width=200
Larghezza, in pixel, della finestra.
height=200
Altezza, in pixel, della finestra.
status=no
Assenza della status bar del browser. L'effetto opposto si ottiene con "yes".
location=no
Assenza della stringa bianca dove i browser visualizzano gli URL dei siti. L'effetto opposto si ottiene con "yes".
toolbar=no
Assenza di tutti i bottoni di navigazione solitamente ospitati nella parte superiore del browser (avanti, indietro, pagina iniziale ecc.). L'effetto opposto si ottiene con "yes".
Si faccia, infine, molta attenzione al nome assegnato alla funzione "esempio", perchè a questo si dovrà far riferimento più oltre.
Impostato il codice all'interno dei tag <head> è necessario agire direttamente sul link:
<a href="javascript:esempio('nuova.htm')">CLICCA QUI PER APRIRE LA NUOVA FINESTRA</A>
In altre parole si assegna al link la funzione "esempio" impostata precedentemente. Il nome del file che si intende caricare all'interno della nuova finestra è "nuova.htm". Quest'ultimo file non ha bisogno di alcuna modifica o accorgimento.
Gli effetti di Javascript sulle finestre dei browser non si limitano a questa semplice dimostrazione, e nei prossimi numeri torneremo su questo argomento.
