Open external links in a new tab by default…

Opening links in a new browser tab is easy – right click on one and from the context menu that appears opt to ‘Open in a new tab’. You can also do that with a middle click on your mouse or with a left mouse click while holding the Ctrl key. It’s nicer if you make it so that a link opens in a new tab by default – attaching the target=_blank attribute to those anchor tags.

Sometimes, doing this to every single link gets extremely annoying. You can let this happen automatically on page load by using a simple JavaScript snippet as described on this post, brought to you by my brother Darryl. That code ensures that every external link you’ve clicked opens in a new browser tab. It’s done by attaching them all with their own event handlers. That’s handy if you use obscure components of your favourite analytics service and like to keep a track of that sort of thing.

Me? Well, I don’t really care about all that. I want it a bit simpler.

How I do it

There are two ways this can be done. One with jQuery and one without.

First, find out if you’ve already used jQuery for your site. If not, I don’t recommend adding a jQuery script call for a measly piece of code.

Without jQuery

Create an array of anchor elements.

var anchors = document.getElementsByTagName("a");

Create a regular expression containing your hostname. You’ll use it to look for links that point to pages on your own site.

var host = new RegExp('/' + window.location.hostname + '/');

You needn’t have the two slashes before and after the hostname expression. However, I’d recommend you use them. It ensures that pages from possible subdomains of your site open in a new tab as well.

The expression host.test(anchors[i].href) would return true when the i^th link points to a page by the same hostname. You’d want the exact opposite. Look for when the links don’t point to your own site and make them open in a new tab like so.

for (var i=0; i < anchors.length; i++){
  if( !(host.test(anchors[i].href)) ){
    anchors[i].setAttribute("target", "_blank");
  }
}

Put all of that in a neat little script tag.

<script>
  var anchors = document.getElementsByTagName("a");
  var host = new RegExp('/' + window.location.hostname + '/');
  for (var i=0; i < anchors.length; i++){
    if( !(host.test(anchors[i].href)) ){
      anchors[i].setAttribute("target", "_blank");
    }
  }
</script>

This code, instead of resting on individual event handlers inserts the target=_blank attribute to all the external links on the client side.

With jQuery

This is easy. Just use the following code somewhere after you've called jQuery.

<script>
  $('a:not([href*="/' + window.location.hostname + '/"])').attr('target', '_blank')
</script>

Simple, isn't it? Once again, jQuery has to be there first. If you don't already have it, you should first call jQuery using the following line.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

That's it!

Have you found this helpful? Is there a way I could shrink the code down further? Let me know. Would you like me to help out with any of your scripting concerns? I'll be there for you.

Oh! One last thing. It's likely you got here because of him, but if you haven't already seen his work, I'd suggest you visit Darryl's site. He's doing a lot of things I can't keep a track of from 10ft away, but you might.

Until the next time...