Hello, I’m Vinch

And this is my website.

Ouvrir un lien dans une nouvelle fenêtre en quelques lignes de jQuery

12/09/09

This post is more than 7 years old. It might not reflect my current skills and convictions.

J’ai toujours trouvé qu’il était du ressort de l’utilisateur de choisir s’il voulait (ou pas) ouvrir un lien dans une nouvelle fenêtre (ou un nouvel onglet). Jakob Nielsen pense d’ailleurs la même chose et l’a même intégré dans un article où il liste 10 erreurs fréquentes sur un site, article qu’il a publié en… 1999 !

Par contre, je peux totalement comprendre quand on me demande de forcer l’ouverture dans une nouvelle fenêtre. En effet, la plupart du temps, l’utilisateur ne sait pas qu’il a le choix… Ce serait trop bête de le perdre juste parce qu’il a ouvert un lien vers un autre site dans la fenêtre courante ! (je sens que ça va générer un débat)

D’un point de vue programmatique, depuis des années, l’usage pour ouvrir un lien dans une nouvelle fenêtre est d’utiliser l’attribut target="_blank" sur la balise <a>. Malheureusement, et nous le savons tous, cet attribut a été déprécié il y a plusieurs années, en même temps que les cadres (ou frames) et provoque donc une erreur à la validation W3C.

Il a donc fallu ruser et faire appel à JavaScript pour s’en sortir. En utilisant l’attribut onclick sur un lien, on a pu arriver à nos fins de façon non-intrusive :

<a href="http://www.google.com" onclick="window.open(this.href);return false;">Go to Google</a>

Ca fonctionne très bien ! Cependant, ajouter les événements directement sur les éléments n’est pas une pratique très recommandée. Mieux vaut tout placer dans un fichier JavaScript séparé.

Dans ce cas, il faut trouver un moyen de repérer les liens qu’on souhaite ouvrir dans une nouvelle fenêtre. Pour cela, la pratique plus ou moins courante dans le monde des développeurs Web est d’utiliser l’attribut rel="external" sur la balise <a>.

De cette façon, le tour est joué en quelques lignes de jQuery :

$('a[rel="external"]').click(function() {
	window.open($(this).attr('href'));
	return false;
});

Parfait. Cependant, cette technique pose problème dans certains cas…

Premièrement, imaginez que vous ayez un site déjà existant avec des milliers de pages. Vous vous voyez placer l’attribut rel="external" sur tous les liens du site ?

Deuxièmement, si votre site est un CMS, vous ne pouvez pas vous permettre d’imposer à la personne responsable du contenu de placer l’attribut rel="external" sur chacun les liens qu’elle introduirait dans le contenu du site…

Pour parer ces cas particuliers, j’ai donc écrit un petit bout de script en jQuery qui ne nécessite aucune intervention sur le code HTML :

$('a').click(function() {
	var href = $(this).attr('href');
	if (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) {
		var host = href.substr(href.indexOf(':')+3);
		if (host.indexOf('/') != -1) {
			host = host.substring(0, host.indexOf('/'));
		}
		if (host != window.location.host) {
			window.open(href);
			return false;
		}
	}
});

Ce script va systématiquement ouvrir tous les liens vers des sites externes dans une nouvelle fenêtre. Dans un premier temps, on regarde si l’attribut href du lien commence par http:// ou https://. Si ce n’est pas le cas, on sait déjà que c’est un lien interne. Ensuite, on regarde si l’hôte du lien (variable host) est identique à l’hôte de la page courante (window.location.host). Si ce n’est pas le cas, on ouvre le lien dans une nouvelle fenêtre.

C’est aussi simple que ça !

34 comments

Leave a comment