target blank xhtml compliant

il problema

È noto che l'Xhtml strict depreca l'attributo target nell'elemento <a> (anchor), con i quali i webmaster sono (erano) soliti indirizzare i visitatori su una nuova finestra (o scheda), lasciando aperta la scheda di partenza.

Tale tecnica ha come senso quello di mantenere il visitatore “con un piede” nel proprio sito, mentre visita una pagina su un sito esterno, nella speranza che poi torni su sito di partenza, rimasto aperto e quindi più facilmente raggiunto.

Chi ha elaborato l'XHTML strict ha ritenuto di dover cassare tale possibilità (che utilizza l'attributo target=_blank). Lo ha fatto, a mio parere, in base a una percezione un po' schizzinosa di internet, proiettando sui comuni visitatori, che invece spesso non masticano molto di informatica, delle competenze decisamente elitarie.

Così un webmaster oggi si trova tra l'incudine di veder fuggir via dal proprio sito i visitatori che cliccano su link esterni, e il martello di vedere il proprio sito come non-valid xhtml, almeno non strict, ma transitional, che è un po' un gradino minore.

la soluzione

Per salvare sia la compatibilità col livello più elevato di standard w3c (l'XHTML strict) e la legittima esigenza di non far scappare dei visitatori, la soluzione è ricorrere a javascript.

In due modi:

  1. agendo sul singolo link, nel caso si pensi applicare a pochi casi questa tecnica;
  2. agendo su molti link.

nel singolo link

È la soluzione più semplice: basta inserire, all'interno del tag <a> la seguente istruzione javascript:

onclick="window.open(this.href); return false;"

in molti link

a) se non si usa jquery

Due semplici steps

  1. inserire nel file che contiene le vostre più frequenti istruzioni javascript (qualcosa come default.js o standard.js, linkato nell'head delle pagine del vostro sito) le seguenti righe:
    function externalLinks() {
    if (!document.getElementsByTagName) return;
    var anchors = document.getElementsByTagName("a");
    for (var i=0; i<anchors.length; i++) {
    var anchor = anchors[i];
    if (anchor.getAttribute("href") &&
    anchor.getAttribute("rel") == "external")
    anchor.target = "_blank";
    }
    }
    window.onload = externalLinks;
  2. inserire in ogni anchor che si vuole far aprire in altra finestra(/scheda) l'attributo rel="external"

b) se si usa jquery

Cioè se nell'<head> di ogni pagina inserite un link tipo <script src="https://code.jquery.com/jquery-latest.min.js"></script>, allora potete, anzi dovete, se volete che la cosa funzioni, usare quest'altra soluzione: inserire nel file javascript, ad esempio default.js, o standard.js, o normal.js, le seguenti istruzioni:

$(function(){
$('a.esterno').on('click',function(e){
e.preventDefault();
window.open($(this).attr('href'));
});
});

Dove “esterno” è la class da aggiungere ad ogni anchor che si voglia far aprire in un'altra scheda.

c) se si vuole passare da js a jquery in modo indolore

Se si ha già la soluzione a) e si vuole passare alla b) senza dover cambiare troppo codice si può adottare la seguente strategia:

beautify the link

Un ulteriore ritocco, per raffinare il tutto, è l'aggiunta di una iconina che indichi al visitatore che si tratta di un external link. Questa aggiunta può essere automatizzata da css, con un comando come il seguente:

a[class="esterno"]:after {content:' ' url(img/linkout.gif);},

Ovvero, se abbiamo adottato la soluzione c):

a[rel="external"]:after {content:' ' url(img/linkout.gif);},

Col quale diciamo al browser di aggiungere l'iconina “linkout.gif” dopo ogni anchor di class “esterno”.