Adding an external link message to all links with jQuery

Learn how to show a message to the user whenever he clicks in a link pointing to a different website

Sometimes we face some situations where we have to tell the user he is leaving our website. This can be achieved with CSS selector without so much problem. But what if the external link is in a button? For that situation we should use JavaScript.

Let's see how to do it in this very short tutorial.

Objective

We need to create a script where a message will be shown whenever the user clicks in some link which will lead him outside of the website. And this must be done unobtrusively.

The foundation

First we need to prepare the foundation of our code. Given the objective we will need to:

1. Loop through all "a" elements
2. Get the href value
3. Compare if the host matches with the href host
4. Assign the click button

1. Loop through all "a" elements

Since we are using jQuery we can make use of the jQuery.each(), as seen below, to loop through all "a" elements:

$('a').each(function () {
// something
});

2. Get the href value

This is a bit trickier but, to make it easier, we will create a function to do the job:

var getLocation = function (href) {
	var l = document.createElement("a");
	l.href = href;
	return l;
};

And we will call it like this:

var a = getLocation($(this).attr('href'));

3. Compare if the host matches with the href host

var retValue = a.href && a.hostname !== window.location.hostname && a.href.indexOf('mailto') == -1;

Here you have to use a set of rules which will make the code work properly. For the sake of the example I’ve decided to keep it simple, but you can (and should) extend according to your project. 

4. Assign the click button

For those who are already aware of jQuery this is an easy piece. But I will leave it here anyway.

if (retValue === true) {
	$(this).on('click', function () {
		// something
	});
}

Now that we have the foundation ready you can see it working in this JSFiddle. When you click the links you will see that one of them shows an alert() message. Now the things will get more interesting, by implementing our confirmation message. 

Showing the message

Now that we have everything in place we can start to work with the message. For this example I will keep it simple and use a simple confirm(), as seen below:

return confirm('Do you really want to leave this website and go to ' + a.href + '?');

Conclusion

Here is the whole code:

var getLocation = function (href) {
	var l = document.createElement("a");
	l.href = href;
	return l;
};

$(function () {
 
	$('a').each(function () {
		var a = getLocation($(this).attr('href'));
 
		// IE fix
		a = getLocation(a.href);
 
		var retValue = a.href && a.hostname !== window.location.hostname && a.href.indexOf('mailto') == -1;
 
		if (retValue === true) {
			$(this).on('click', function () {
				return confirm('Do you really want to leave this website and go to ' + a.href + '?');
			});
		}
	});
 
});

As you can see it is very simple to make and even simpler to use. Once you call it in all pages it will scan all your links and check if they should have this extra event or not. Also, for most of the projects we don’t need more than this. And when you have the need of more customization (Bootstrap Modal or jQuery UI Dialog) you can just replace the confirm() by something else.

I will show how to do it in the future articles.

EDIT: I've made a small change on the script (bold, see above) as IE11 had some problems to get the a.hostname.