jQuery : How to automatically make external links open to new tabs

One of the ways you can keep readers engaged to your website content is to make sure that links to external sites open to new tabs (or windows). This way, the material they’re engaged in on your site is not erased, they can switch to the newly opened content, and eventually go back to your content (and hopefully continue what they were doing).

However, as websites grow and scale, it can get a little cumbersome to keep track of all the links and manually mark each of them whether or not they open in a new tab. As a case in point, in WordPress (where it’s supposedly pretty easy to do this already), whenever you add a new hyperlink while writing a new article, you have to tick a checkbox to make it open a new tab.

Wouldn’t it be nice to automatically have links open in a new tab (or don’t)? With a bit of jQuery code, we can.

The Code

If you’re itching to jump straight to the code, then here it is, in all it’s -um- glory. Just copy and paste this into your jQuery-enabled page anywhere in between script tags.

jQuery(function($){
    $('a[href^="http://"]')
        .not('[href*="richardneililagan.com"]')
        .attr('target','_blank');
});

Make sure you substitute your own domain name for the richardneililagan.com in there, and you’re all good to go.

If you want to know how that works, read on.

jQuery Magic

What we want to achieve is that when a link pointing outside of our domain is clicked, the linked content is loaded in a new tab. So it’s pretty clear that we want to filter all the links in our site for all those that point outside our domain.

We can do that using simple jQuery selectors:

    // assuming that our domain is RICHARDNEILILAGAN.COM
    var external_links = 
        $('a[href^="http://"]').not('[href*="richardneililagan.com"]');

The first selector (a[href^="http://"]) simply filters for all the links in our page with href values (the URL it links to) that start with http://. External links, unlike internal ones, require http:// for them to properly work, so it’s a good filter for our purposes.

The second filter .not('[href*="richardneililagan.com]') further filters our links by removing those links that have richardneililagan.com (our domain) in them. We’re assuming here that when a link points to something with richardneililagan.com in it, then its internal.

Now, we actually move to making these links open in new tabs. In semantic HTML, to make a link open in a new window/tab, you just have to give it the target = '_blank' attribute pair. So we’re going to do just that, but by using jQuery to do it for us.

    external_links.attr('target','_blank');

With that, all our external links should have been updated target attributes so that they open in new tabs.