jQuery: aprire i link esterni in una nuova finestra

Utilizzare XHTML con DOCTYPE Strict anzichè Transitional ha i suoi vantaggi e su questo credo saranno d’accordo la maggior parte degli addetti ai lavori. Dopotutto il Transitional (come già ci anticipa il suo nome) era da considerare di passaggio tra HTML e XHTML Strict anche se questa sua destinazione d’uso si è persa notte tempo.

Il DOCTYPE di tipo Strict presenta, però, uno svantaggio non trascurabile che fa ammattire non poco i designer. Purtroppo l’attributo target="_blank" all’interno dei link non viene validato e ci costringe ad utilizzare per forza Javascript per aprire un link esterno in una nuova pagina. La scelta del W3C è stata dettata dai problemi di accessibilità che derivano dall’utilizzo della proprietà ma ci sono casi in cui l’utilizzo è essenziale.

In rete ci sono tantissimi script e molti usano le tecniche più disparate. Molti di questi però funzionano a volte o, peggio ancora, non funzionano per nulla. Tempo fa avevo realizzato io stesso un piccolissimo frammento di codice con l’ausilio di jQuery ma il codice messo a disposizione da CSS-Tricks è sicuramente degno di nota e io stesso lo consiglio vivamente.

Il codice utilizzato per aprire in una nuova finestra un link esterno usando jQuery è il seguente:

view source print?

01 $('a').each(function() {

02   var a = new RegExp('/' + window.location.host + '/');

03   if(!a.test(this.href)) {

04   $(this).click(function(event) {

05   event.preventDefault();

06   event.stopPropagation();

07   window.open(this.href, '_blank');

08   });

09   }

10 });

Come possiamo notare il codice, attraverso una Regular Expression verifica che il link punti o meno all’interno del nostro sito. In caso l’indirizzo sia esterno, viene aperto in una nuova finestra senza modificare la pagina corrente.