Ouvrir les liens externes dans un nouvel onglet en XHTML Strict

Posté le 2 septembre 2010

L'attribut target="_blank" n'étant plus autorisé en XHTML Strict, j'ai trouvé 2 méthodes utilisant javascript pour résoudre ce problème et pouvoir continuer à valider correctement mon code:

La première méthode est plutôt propre et efficace mais a l'inconvénient de ne pas fonctionner lorsqu'on utilise un éditeur HTML pour rédiger un billet ou un langage de balisage léger comme Markdown (ou autre) car dans ce cas, on est obligé de déclarer à la main la classe CSS "lien_ext" sur chaque lien externe.

La seconde méthode présente l'avantage d'utiliser les expressions régulières pour détecter les liens externes mais triche un peu car elle finit par ajouter aux liens l'attribut target="_blank".

J'ai donc fait un petit mix pour obtenir le meilleur de ces 2 solutions:

function open_ext_link()
{
    // On récupère tous les liens (<a>) du document
    // dans une variable (un array), ici liens.
    var liens = document.getElementsByTagName('a');
    // Une boucle qui parcourt le tableau (array) liens du début à la fin.
    for (var i = 0 ; i < liens.length ; ++i)  {
        // On détecte les liens externes et on leur
        // applique au passage la classe "lien_ext".
        var siteUrl = document.location.hostname;
        var regEx = new RegExp("^http(s)?://");
        var regEx2 = new RegExp("^http(s)?://(www\.)?" + siteUrl);
        if (regEx.test(liens[i].href) && !regEx2.test(liens[i].href))  {
                   liens[i].className = 'lien_ext';
                   liens[i].title = 'S\'ouvre dans un nouvel onglet';
                   // Au clic de la souris
                   // on ouvre un nouvel onglet ayant pour URL le href
                   // du lien cliqué et on inhibe le lien réel.
                   liens[i].onclick = function()  {
                               window.open(this.href);
                               return false;
                   };
        }
    }
}

// Au chargement de la page, on appelle la fonction.
window.onload = open_ext_link;

Vous noterez que j'applique une classe "lien_ext" à ces liens pour permettre leur personnalisation via le CSS. J'ai également ajouté le support des liens HTTPS.

Commentaires

Poster un commentaire