Aprire una pagina HTML in un'altra finestra del browser è una cosa abbastanza
comune. Ci sono svariati motivi per volerlo fare. Per esempio, questo articolo contiene molti esempi e link si aprono in una nuova finestra,
così da permettere all'utente di proseguire la lettura dell'articolo senza dover
perdere il filo e dover ritornare attraverso il bottone indietro del browser.
Personalmente ritengo che finestre con dettagli, esempi, codice, rimandi, o link
esterni al sito spesso siano più gradite all'utente se aperte in una nuova finestra.
Target e validazione
Il modo più semplice e noto per aprire un link in una finestra è per certi
versi un metodo obsoleto:
<a href="http://www.html.it" target="_blank"
title="Link esterno, si apre in una nuova finestra">
Se avete provato a validare le vostre pagine
che usano target scritte in HTML o XHTML strict
il validatore vi avrà risposto che non esiste l'attributo target.
Una possibile soluzione è dichiarare un documento con dtd transitional
oppure frameset. Certo si potrebbe pensare: perchè devo declassare
i miei documenti per un solo attributo? Vedremo qui le possibili alternative che
ci consentono di restare strict.
Una prima soluzione con Javascript
C'è da premettere che tutte le alternative al target richiedono,
in forma più o meno leggera, l'uso del Javascript. La più semplice
è senza dubbio la seguente, che richiede qualche carattere in più rispetto a target
ma è altrettanto semplice ed efficace:
<a href="http://pro.html.it" onclick="window.open(this.href);return false" title="nuova finestra">home page</a>
Una sezione di link esterni al sito
In alcuni casi, ad esempio per una sezione di link esterni al sito, potrebbe
venir utile evitare di replicare il codice dell'onclick per tutti
i link. Supponendo di avere un div con id="links" il
dom può essere utile per consentire l'apertura dei link presenti in tale div in
una nuova finestra. Ecco il codice HTML, una semplice lista di link:
<div id="links">
<p>Link utili</p>
<ul>
<li><a href="http://www.google.it">google, il motore di ricerca</a></li>
<li><a href="http://world.altavista.com/">babelfish - traduzioni on line</a></li>
<!--ecc--!>
</ul>
Come si può notare non si è aggiunto nessun Javascript in linea. Basta infatti
un semplice script nella sezione head della pagina. Lo script al
caricamento recupererà tutti i link all'interno del div id="links"
e consentirà l'apertura di questi link in una nuova finestra del browser:
onload=function(){
if(!document.getElementById || !document.getElementsByTagName) return;
ext=document.getElementById("links");
l=ext.getElementsByTagName("a");
for(i=0;i<l.length;i++)
l[i].onclick=function(){window.open(this.href);return(false)};
}
Da notare che se il div contenente i link esterni dovesse avere id diverso,
vi basterà sostituirlo dove indicato in grassetto nel codice sopra. Ed ecco il
risultato. Il codice Javascript dell'esempio è incorporato nella pagina, ma
in situazioni reali sarebbe meglio metterlo in un file esterno.
Usare altri attributi per ottenere l'effetto di target
In questo articolo viene spiegato come ottenere link esterni standard usando l'attributo
rel, perfettamente supportato dai link. Sulla tecnica nel complesso
ho qualche riserva: ritengo che non abbia molto senso aggiungere ai link l'attributo
target con Javascript, se ciò si può evitare. Inoltre, invece di
un attributo che ha poco utilizzo pratico, potremo usare una classe, di modo da
poter anche distinguere attraverso i fogli di stile la presentazione dei link
esterni. Vediamo il codice HTML:
<p>mentre per le ricerche ecco <a href="http://www.google.it" class="ext">google,
il motore di ricerca</a>.</p>
Il Javascript si occupa di ricercare al caricamento della pagina tutti i link
con classe ext e far si che vengano aperti in una nuova finestra,
aggiungendo per ciascun link l'attributo title così da poter informare
l'utente:
onload=function(){
if(!document.getElementsByTagName) return;
l=document.getElementsByTagName("a");
for(i=0;i<l.length;i++){
if(l[i].className.indexOf("ext")!=-1){
l[i].title="link esterno, si apre in una nuova finestra";
l[i].onclick=function(){window.open(this.href);return(false)};
}
}
}
Questa soluzione è abbastanza semplice, e consente all'utente di riconoscere
grazie ai fogli di stile i link esterni al sito. C'è un'altra soluzione che possiamo
adottare. Vediamola.
Facciamo scegliere l'utente
Anche in merito a nuove finestre, come per lo Style Switcher per tutti e il
Testo a misura di utente con CSS e Javascript possiamo dare all'utente la
possibilità di personalizzare la sua esperienza di navigazione. Una soluzione simile permetterebbe infatti di non sacrificare l'accessibilità, di migliorare di molto l'usabilità del sito e di memorizzare la preferenza dell'utente anche
per visite successive.
Vediamo subito l'esempio, costituito da due semplici
pagine con qualche link. Un piccolo checkbox basta per far esprimere all'utente
la preferenza in merito a link esterni e nuove finestre. L'esempio è volutamente
semplice, in casi reali andrebbe, a parer mio, posizionato bene in vista in una
delle colonne laterali, magari sotto il menu. La preferenza viene mantenuta tra
le diverse pagine che incorporano il checkbox e lo script esterno, anche per visite
successive. Ciò è possibile grazie ai cookie e ad un po' di codice Javascript.
Anche in questo caso, come nel caso dello style switcher, è bene informare l'utente
che per poter disporre di questa funzionalità Javascript e i cookie devono essere
abilitati. Per aggiungere una funzionalità simile ad una qualsiasi pagina avremo
bisogno di tre cose:
- Attribuire nell'html ai link che si vogliono aprire in una nuova finestra
una classe ext - Aggiungere un checkbox per permettere all'utente di scegliere
- Linkare lo script nella sezione head della pagina
Diamo uno sguardo al codice essenziale per inserire il checkbox nella pagina:
<label for="newin" onclick="check();"><
input type="checkbox" id="newin"> apri i link esterni al sito in una nuova
finestra
</label>
È fondamentale per il corretto funzionamento del tutto che il checkbox
abbia id="newin".
Ora linkiamo il file Javascript, inserendo la seguente riga nella sezione head:
<script type="text/javascript" src="nuovafinestra.js"></script>
A questo punto il gioco è fatto, il codice Javascript si occupa di tutto il
resto: gestire i cookie e memorizzare la preferenza dell'utente, aggiungere l'attributo
title ai link esterni e aprirli in una
nuova finestra se il checkbox è selezionato. Come si può notare nel semplice esempio
tale preferenza viene mantenuta tra tutte le pagine che includono script e checkbox,
proprio grazie ai cookie. Lo script, anche se abbastanza corposo, non è difficile,
ma soprattutto non c' è bisogno di conoscere Javascript per poterlo usare.
La compatibilità dovrebbe essere estesa a tutti i browser moderni e dom-compatibili.
Personalmente l'ho testato con IE6, Opera 7.23 e Mozilla e non ho riscontrato
problemi. Ho preparato una pagina
html che ne riporta il codice.
