Comment ouvrir un lien dans une nouvelle fenêtre ?

visuel nouvelle fenêtreIl existe plusieurs façons d’ouvrir un lien dans une nouvelle fenêtre. Voyons ensemble les quelques possibilités qui s’offrent à nous. Mais avant de vouloir forcer l’ouverture d’un lien dans une nouvelle fenêtre, il faut se demander pourquoi on désire contrôler cette ouverture. Une fois cette question résolue, passons en revue les différentes techniques historiques pour ouvrir un lien dans une nouvelle fenêtre.

L’attribut target est introduit

L’attribut target a été introduit en HTML 4. Il accepte 4 valeurs : _blank, _self, _parent, _top. Les trois dernières permettent de cibler les balises iframe. L’attribut _blank permet de faire exactement ce que nous désirons, à savoir ouvrir un lien dans une nouvelle fenêtre.<a href="http://www.bellami.fr" target="_blank">Le blog de Bellami</a>L’avantage de cette méthode est de pouvoir contrôler facilement l’ouverture du lien que l’on est en train de créer. Un des inconvénients est que cela pollue le code HTML qui du coup, n’est pas du tout optimisé. De plus, il existe aujourd’hui des façons plus « sexy » de le faire, de pouvoir cibler tous les liens ou une partie d’entre eux par exemple, en très peu de code. Cela facilitera par la même occasion la maintenance général de votre site web. Ces solutions ont vu le jour grâce à l’apport de nouveaux standards.

L’attribut target devient deprecated

La suppression de l’attribut target dans les versions STRICT des normes HTML 4.1 représente un retrait très rapide. Ce serait-on aperçu qu’il s’agissait d’une mauvaise norme ? Il faut donc aujourd’hui se passer de l’utilisation de l’attribut target. Dans la même optique que la séparation de la forme et du contenu, il faut ajouter la séparation de l’événementiel (action effectuée par l’utilisateur de votre page web). Ce qui nous donne aujourd’hui un trio que tout intégrateur se doit de respecter : le contenu se trouve dans le code HTML, la forme dans la feuille de style CSS, le comportemental est contrôlé via Javascript. Si l’attribut target est devenu deprecated, c’est dans le but de déplacer le comportement sur l’ouverture d’un lien vers la programmation lui étant dédié, le Javascript.

L’équivalent de l’attribut target en JavaScript

Pour obtenir la même action, il existe l’événement onclick en Javascript.<a onclick="window.open(this.href); return false;" href="http://www.bellami.fr">Le blog de Bellami</a>Sur le clic de la balise a, on ouvre dans une nouvelle fenêtre l’adresse présente dans l’attribut href. Le return false permet de bloquer toute action une fois l’ouverture lancée. Cela permet de bloquer le comportement naturel du navigateur qui serait dans notre cas présent d’ouvrir le lien dans la même fenêtre.

Regrouper son code et son contrôle

Pour obtenir les meilleurs performances possibles pour son site web, on se doit de regrouper tout le code JS d’une page au sein d’un même fichier. Cela soulage le navigateur et le serveur de nombreuses requêtes ; cela permet également d’offrir une meilleure compression de son code, et dons le poids total du code téléchargé par le navigateur. Ce fichier doit se trouver en bas de page, juste avant la fermeture de la balise body de préférence, afin que le téléchargement du fichier JS ne bloque pas le navigateur. En effet, tant que le navigateur télécharge un fichier Javascript, il ne va faire aucun autre traitement avant que le fichier ne soit entièrement téléchargé.

Regrouper ce code en bas de page permet également d’avoir un contrôle sur tous les liens présents sur votre site. Je vous propose une solution, libre à chacun de l’adapter à ses propres besoins. Avec l’aide de jQuery, nous pouvons décider d’appliquer un window open à tous les liens pointant vers un site externe. Pour améliorer le contrôle et la maintenance du site, les liens externes possédant la classe « noNewWindow » seront exclus de ce traitement. Par contre, cela implique que les liens internes de votre site soientt en relatifs et non pas en absolus.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a[href^='http://']").click(function(){
if(($(this).attr("class"))==='noNewWindow'){
return true;
}
window.open(this.href);
return false;
});
});
</script>

Nous pourrions améliorer cette méthode en comparant l’adresse actuelle et l’adresse du lien au lieu de cibler le début de la valeur de l’attribut href. Nous pourrions aussi, comme le propose Kevin Yank dans son article New-Window Links in a Standards-Compliant World Article, utiliser la valeur external de l’attribut rel. A vous de voir quelles méthodes est la plus adaptées à vos besoins!

Cette entrée a été publiée dans HTML, JS, avec comme mot(s)-clef(s) , , , . Vous pouvez la mettre en favoris avec ce permalien.

5 commentaires pour Comment ouvrir un lien dans une nouvelle fenêtre ?

  1. Sur wordpress, tous les liens sont en absolus. J’ai du adapter mon code JS pour qu’il ajoute l’ouverture à tous les liens possédant la classe « bel-open-window », et seulement aux liens possédant cette classe.

    Cela donne le code suivant :<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $("a[class^='bel-new-window']").click(function(){
    window.open(this.href);
    return false;
    });
    });
    </script>

  2. Le problème c’est que Js est désactivé sur bon nombre de postes.
    Dans ce cas il devient inutile. Il faut le prendre en compte.

  3. Bellami

    @Kadom : Je ne peux être d’accord avec toi.
    JS est fonctionnel sur l’essentiel des postes (+ de 95%). La solution JS ne sera pas implémenté pour une minorité de visiteurs, ce qui ne me pose personnellement pas de problème dans ce cas là (il s’agit d’une dégradation harmonieuse). Cela dépend de ce que l’on veut obtenir, je t’invite à lire cet article : http://www.bellami.fr/pourquoi-ouvrir-un-lien-dans-une-nouvelle-fenetre

    Après si par exemple tu dois faire un intranet où tu sais que le JS est désactivé d’office et que tu as ce besoin ou cette demande, c’est sûr il faut être pragmatique et réutiliser un bon vieux target.

    Comme toujours il n’existe pas une seule bonne façon de faire, tout dépend des cas.

  4. Aruka

    Merci pour l’astuce mais PLUS DE TUTO JS PLEAAAAAAAAASE !!

  5. Bellami

    Il va y en avoir même si je suis plus à l’aise sur le CSS. Si tu as des demandes précises n’hésites pas ;)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>