TheJoe.it Into the (open) source

17set/125

Javascript: aprire automaticamente link esterni in una nuova finestra

javascript

L'articolo di oggi è un piccolo consiglio sui link per avere un sito conforme alle norme w3c(1). Questa procedura è valida nel caso stiamo usando la versione "XHTML 1.0 Strict", un po' datata, ma sempre valida se dichiarata nel tag "HTML" del sito.

Il designer web ha diversi modi per impostare l'apertura di un dato link in una nuova pagina (o nuovo tab) del browser. Il primo ad essere implementato è stato l'inserimento dell'attributo "target='_blank'" all'interno del tag di riferimento ai link "<a>". Questo è il modo più semplice di aprire un link in una seconda finestra, ma sfortunatamente non risponde agli standard w3c. La soluzione suggerita dal w3c è l'inserimento di questi altri attributi  "onclick='window.open(this.href); return false;'", di fatto risolvendo il problema con qualche breve istruzione javascript.

Per nostra fortuna javascript è un linguaggio veramente vario, uno dei comportamenti che possiamo gestire è l'apertura dei link. Con questo terzo ed ultimo esempio faremo aprire in un nuovo tab tutti i link esterni, ovvero quelli che come riferimento iniziano con "http://" risparmiandoci di dover scrivere ogni volta il codice suggerito dal w3c su ogni link esterno. Il codice di riferimento è questo:

function externalLinks() {
  if (!document.getElementsByTagName) return;
  var anchors = document.getElementsByTagName("a");
  for (var i=anchors.length-1; i>=0; i--) {
    var anchor = anchors[i];
    if (anchor.href && anchor.href.substr(0,7) == "http://")
    anchor.target = "_blank";
    }
  }
window.onload = externalLinks;

(1)_ Il w3c è l'organizzazione no-profit che si occupa di stabilire con una certa rigidità gli standard che i webmaster e gli sviluppatori dei browser devono seguire per creare e visualizzare pagine dette "XHTML", garantendo in questo modo la massima compatibilità tra il sito e i vari browser. Per saperne di più gli intenti dell'organizzazione sono spiegati (oltre che sul sito dell'organizzazione) alla pagina relativa su Wikipedia.

About

Mantengo questo blog a livello amatoriale dal 2009. Sono appassionato di grafica, tecnologia, software Open Source. Fra i miei articoli non sarà difficile trovarne circa la musica, ed alcuni di riflessioni personali, ma preferisco indirizzare la linea del blog principalmente verso la tecnologia. Per informazioni contattami.

Commenti (5) Trackback (0)
  1. Si troppo facile così…intendevo x entrambe. Dovevo aggiunge l’or
    così:
    if ((anchor.href && anchor.href.substr(0,7) == “http://”) || (anchor.href && anchor.href.substr(0,8) == “https://”))

    allungando il range a 8 e aggiungendo una s
    ciaoooo

  2. Questo apre una nuova finestra solo per il prot http e per l’https?

  3. Beh, le specifiche w3c sono ancora più vecchie (2002 – “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”) e vengono ancora usate come standard. Ed è anche vero che l’HTML 5 è fuori già da un po’, ma non è ancora lo standard.

    L’unico modo di garantire la compatibilità con l’apertura forzata di un link in un secondo tab è usare il “transitional” al posto dello “strict”. Il transitional avrebbe dovuto essere provvisorio.

    A questo proposito ti segnalo una interessante statistica redatta da Yahoo: http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/ che conta solo alcuni paesi del mondo (questa è più aggiornata: 2010). Anche se la percentuale è bassa (nel peggiore dei casi attorno al 2%) tu mi insegni che è necessario garantire la compatibilità.
    E infatti il metodo descritto in questo articolo non si traduce in una mancanza di compatibilità per l’utente che ha js disattivato, semplicemente i link verranno aperti nella stessa pagina (il webmaster non avrà raggiunto il suo obiettivo, ma l’utente non sarà per questo danneggiato).

  4. A parte che l’articolo originale del 2003 è un po’ vecchiotto (http://www.sitepoint.com/standards-compliant-world), è vero che nel 2012 non ha molto senso citare il caso ma.. se javascript è disabilitato?


Leave a comment

Ancora nessun trackback.