J’utilise couramment le script jQuery ci-dessus pour ouvrir automatiquement un lien externe dans un nouvel onglet en y ajoutant l’attribut target _blank.

Il ne s’agit pas d’une solution très propre, car la cible _blank peut entraîner des problèmes de sécurité, d’accessibilité et de performance. Je n’ai en revanche pas trouvé de contre-indication majeure à utiliser un script dans la mesure où l’utilisateur peut le faire manuellement. Le seul souci à mes yeux concerne l’accessibilité qui peut-être un peu dégradée.

Notez tout de même que depuis WordPress 4.7+  les attributs rel= »noopener noreferrer » sont automatiquement ajoutés aux liens externes, le problème de sécurité est maintenant derrière nous (à priori).

jQuery(document).ready( function($) {
	// Open all external link in a new tab
	$('a').each(function() {
	   var a = new RegExp('/' + window.location.host + '/');
	   if (!a.test(this.href)) {
		   // This is an external link
			$(this).attr("target","_blank");
			// Remove after your tests 
			console.log($(this));
	   }
	});
});

Si vous n’êtes pas sur WordPress, vous pouvez modifier la fonction pour ajouter au moins l’attribut rel noopener de la même manière que pour le target.

 
jQuery(document).ready( function($) {
	// Open all external link in a new tab
	$('a').each(function() {
	   var a = new RegExp('/' + window.location.host + '/');
	   if (!a.test(this.href)) {
		   // This is an external link
		   $(this).addClass('external').attr('target','_blank').attr('rel','noopener');
	   }
	});
});

Enfin, si vous utilisez un plugin lightbox tel que Fancybox, vous pouvez vouloir ouvrir des liens vers des images externes directement à partir de votre page. Si c’est le cas, vous pouvez essayer ce qui suit.

 
jQuery(document).ready( function($) {
	// Open all external link in a new tab
	$("a:not([href$='.jpg']):not([href$='.jpeg']):not([href$='.gif']):not([href$='.png'])").each(function() {
	   var a = new RegExp('/' + window.location.host + '/');
	   if (!a.test(this.href)) {
		   // This is an external link
		   $(this).addClass('external').attr('target','_blank').attr('rel','noopener');
	   }
	});
});

Voici un bon article de blog d’Ali Kamalizade sur medium qui traite du sujet.

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

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