Ouvrir systématiquement tous les liens extérieurs dans une nouvelle fenêtre


Voila bien une demande systématique de _tous_ les clients : "je veux que les liens s'ouvrent dans une nouvelle fenêtre". Certes, certes, cela fait des années que tout le monde utilise la fonctionnalité "ouvrir dans un nouvel onglet" du navigateur afin de choisir ce que l'on fait avec chaque lien, mais peu importe, c'est le client qui décide. Du coup, la p'tite dificulté que cette demande peut engendrer est sur deux plans :

  • L'attribut "target" est maintenant "deprecated", et il serait vraiment idiot de ne pas valider mes pages xhtml 1.0 uniquement pour cette raison. Donc, pas de "target='_blank'" en dur.
  • Enfin, avec un CMS, ce sont les clients qui saisissent eux mêmes les liens, au fil de leur contenu, avec (souvent) une quantité non négligeable de liens pointant vers leur propre site. Il y a donc des liens qu'il faut ouvrir dans la même page.

Une solution évidente au premier abord : ajouter un bouton radio dans la boite de dialogue permettant de créer les liens avec un label genre "ouvrir ce lien dans une nouvelle fenêtre". Je crois que c'est typiquement le genre de fausse bonne idée qui va m'amener une floppée de coups de téléphone et de Mails du genre :

  • Client : Ce lien ne s'ouvre pas comme je l'avais demandé !!!
  • Moi : Avez-vous bien coché la case "ouvrir dans une nouvelle fenêtre" ?
  • Client : Heuuuu, quelle case ?...".

Bref, partant de là, j'ai trouvé une idée simple pour tout le monde (et surtout le client), qui fonctionne sans faille, et sans ajouter un seul bouton, tout en restant valide XHTML 1.0. Le truc est tout simplement d'ajouter l'attribut 'target' de façon dynamique au chargement de la page, uniquement sur les liens commençant par "http:". Le tour est joué en seulement 3 lignes de JS (avec prototype) :

function addExtLink(){
  $$('a').each(function(this_link){
    if(/^http:/.test(this_link.readAttribute('href'))){
      this_link.writeAttribute('target', '_blank');
    }
  });
}

Je vous laisse le soin de charger ça sur 'dom:loaded'. Voila, c'était mon bout de code à 10c du jour :-).


Envie de donner votre avis ?

Votre Nom*

Adresse Mail (ne sera pas publiée)*

Site web

Votre commentaire*


Cochez cette case si vous n'êtes pas un robot spammeur