Web Design  »  Articoli  »  Web design 

Aprire una pagina HTML in un'altra finestra del browser è una cosa abbastanza comune. Ci sono svariati motivi per volerlo fare. Per esempio, nella sezione pro.html.it che ospita questo articolo 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>

Vediamo il risultato: questo è il link alla home page e se avete Javascript abilitato, come il 90-95% degli utenti di internet, dovrebbe aprirsi in una nuova finestra.
Questa soluzione, però, potrebbe non essere la più agile nella codifica, vediamone altre.

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.

Altri articoli

Altre guide

Altre newsletter