Open all external link in a new tab - bweb

This is not an innovation, but I comonly use the above jQuery script to automaticaly open external link in a new tab by adding the target _blank attribute.

Keep in mind that this is not a very clean solution since the target _blank can lead to security, accessibility and performance concern.

Since WordPress 4.7+ adds rel=”noopener noreferrer” to external links, the security issue is now behind us (I guess).

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));
	   }
	});
});

If you’re not on WordPress, you can tweak the function to add the at least the noopener rel attribute the same way it adds the target one.

 
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');
	   }
	});
});

Finnaly, if you use a lightbox plugin like Fancybox, you may want to open links to external images directly from your page. If so, you can try the following.

 
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');
	   }
	});
});

Here is a good blog post from Ali Kamalizade on medium (yes, medium…).

Cancel reply