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.
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.
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.
host.test(anchors[i].href) would return true when the ith 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
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
This code, instead of resting on individual event handlers inserts the target=_blank attribute to all the external links on the client side.
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>
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...