External Opener : ouvrir les liens dans un nouvel onglet en XHTML Strict

Posté le 21/8/09 dans Développement.

Je vous avais déjà parlé, dans un précédent article, d'une manière d'ouvrir un lien dans un nouvel onglet en XHTML strict. Vu le succès (relatif) de ce petit script, j'ai décidé de vous les publier ici. Vous n'aurez ainsi plus qu'à les utiliser sur votre site, en les incluant à la fin de votre balise head.

N'hésitez pas à utiliser ce script sur tous vos projets, ainsi qu'à me faire part de toutes vos suggestions d'optimisation.

Par ailleurs, si certains d'entre vous ont une version avec un autre framework, n'hésitez pas à me contacter. Je la rajouterai dans cette liste.

Mots-clefs : , , ,

6 réactions sur cet article.

  1. ChoiZ says:
    September 7, 2009 at 12:19 pm

    Merci de penser à moi :P

    Voilà ta version jQuery ;)

    $(document).ready(function(){
    $("a[href*=\'http://\']:not([href*=\'"+location.hostname+"\'])").attr("target","_blank");
    });

    Reply
  2. ChoiZ says:
    September 7, 2009 at 12:55 pm

    Tu peux tout faire avec une regex :P

    var regEx = new RegExp("^http://");
    var regEx2 = new RegExp("^http://(www\.)?" + siteUrl);

    :)

    Reply
  3. Jonathan Petitcolas says:
    September 8, 2009 at 12:22 am

    Merci beaucoup de ta participation ! Ta version est rajoutée. :)

    Par contre, je n'ai pas compris ton deuxième commentaire ? :s

    Reply
  4. ChoiZ says:
    October 24, 2009 at 11:52 am

    Le deuxième commentaire veut dire la ligne :

    var regEx = new RegExp...

    Et la ligne :

    var regEx2 = new RegExp...

    Peuvent être sur la même ligne qui vérifie : si ça commence par http et | ou si il y a http + www + siteUrl. ;)

    Reply
  5. Maitre de Dieu says:
    October 31, 2009 at 2:03 pm

    Salut et merci à toi pour ton code !

    J'ai pris la version JS pur vu que je n'utilise pas de framework pour le moment.

    Reply
  6. Comète says:
    September 3, 2010 at 7:39 am

    Bonjour,

    j'ai "remixé" la solution en full javascript présentée ci-dessus avec celle du site alsacreation.com qui permet au final de ne pas utiliser target="_blank". J'ai ajouté le support des liens https et une classe "lien_ext" pour permette de personnaliser ces liens via le CSS.

    Si ça vous intéresse, j'ai rédigé un petit article à ce sujet ici: http://gerard.geekandfree.org/blog/2010/09/02/ouvrir-les-liens-externes-dans-un-nouvel-onglet-en-xhtml-str/

    Reply

Réagissez sur cet article !