X

LATEST #JQUERY NEWS

How to Dynamically Open External Links in New Window


Any web developer will probably know that using the target=”_blank” attribute will force any link to open in a new window, which is great for when you want to link to external content or sites but you don’t want your user to stray too far from your pages. What’s not so great about it, though, is that it can be a real pain to have to remember to add target=”_blank” to every single link to external content. It’s also a problem if your site has external links that have been added dynamically because they might not even have the target attribute attached to them.

For these reasons, it’s often better if you add the target=”_blank” attribute dynamically using JavaScript or jQuery. It’s actually very easy and straightforward to achieve this, and the code is relatively simple. All you need to do is have the code determine if a link is external or not, and if it is, add the attribute target=”_blank”. See the code snippet below to learn how to dynamically open external links in new tabs for your projects:

$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if(!a.test(this.href)) {
      $(this).click(function(event) {
          event.preventDefault();
          event.stopPropagation();
          window.open(this.href, '_blank');
      });
   }
});

The snippet above tests whether or not the anchor tag is linking to content within your site by using the window.location.host chained methods and the .test  method. If the anchor tag is found to link to external content, then the target=”_blank” attribute will be applied to the anchor tag, and the link will open in a new window or tab. This snippet is super useful if you have a lot of links on your site and find it hard to manage them all, or if you simply are forgetful when it comes to adding that pesky target=”_blank” attribute. Either way, it’s certainly a simple and useful addition to any project.

Recently Published

Screen Shot 2017-04-23 at 10.15.41 AM
»

How to Use jQuery to Create a Sticky Navigation on Scroll

Creating “sticky” elements is something that can often be ...

article image
»

How to Use jQuery’s Keystroke Methods

jQuery has a few built-in keystroke methods that are all triggered by ...

article image
»

How to Change iFrame Styling Using jQuery

If you’ve ever had the displeasure of working with iFrames, ...

article image
»

How to Use jQuery to Create Blinking Text

Blinking text is one of those cool features that you never actively ...

article image
»

Convert Images to Black and White using jQuery

Converting an image to black and white is no longer a manual event. ...

article image
»

How to Disable Right-Click Menu Using jQuery

There can be dozens of reasons why you may want to disable right ...

article image
»

How to Optimize jQuery Code for Better Performance

jQuery is the most popular client side library, in fact almost every ...

article image
»

Using Head.js to Load All Your JavaScript

In the past few years, client side frameworks/libraries have become ...

article image
»

How to Detect Browser Using jQuery

One of the more frustrating parts of creating a new web project is ...