jQuery.liensExternes

Le but de ce billet n’est pas de relancer le débat à savoir si faire ouvrir un lien dans une nouvelle fenêtre est une bonne pratique. Parfois, c’est ce que le client veut et il ne veut pas changer d’idée. Et on le sait, le fait de donner un attribut target en XHTML stricte n’est pas valide. Cependant, si on donne cet attribut à un objet DOM, le navigateur le traite correctement.

Voici donc une petite extension à l’objet jQuery qui parcours tous les liens dans la page active et modifie l’attribut TARGET de ces-derniers selon s’ils pointent vers un site externe ou un document PDF. La méthode prend aussi un seul paramètre — un objet — qui prend une variable, exclude qui est une expression régulière servant à exclure certains domaines.

(function($) {
    $.fn.extend({
        /**
         * Liens externes automatiques
         *
         * @param {Object} params
         * @return {Void}
         */
        'liensExternes': function(params){

            params = $.extend({
                exclude : /^$/
            }, params);

            $(this)
            .filter(function() {
                var $this = $(this);
                if ($this.is('a[@href$=\.pdf]')) { return true; } // Fichiers PDF
                if ($this.is("a[@href^=http]") && !$this.attr('href').match(params.exclude)) { return true; } // Liens commencant par "http" mais non exclus
            })
            .addClass('externe')
            .attr('target', '_blank')
        }
    })
})

Une fois cette extension définie, on peut donc l’initialiser au $(document).ready :

$(document).ready(function() {
    $.liensExternes({
        exclude : window.location.host
    });
});

Voilà ! C’est encore une méthode très simple, mais elle sera développée au cours des prochaines semaines. Ça me fait penser que je devrais créer un 4^ème dépôt SVN contenant des petits snippets comme celui-ci…