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

article image
»

15 Newest jQuery plugins for responsive website

Due to the proliferation of smartphones and tablets, responsive ...

article image
»

How to use Redux with jQuery

State management is one of most integral parts of any software and a ...

article image
»

Fade HTML Table Row on Hover Using jQuery

HTML tables are the ideal choice for displaying data in tabular form. ...

article image
»

Drag and Drop HTML Table Rows Using jQuery

HTML tables are the preferred UI option for displaying data. Sorting, ...

article image
»

Top 5 Best JavaScript Template Engines

Template engines help in the decoupling of HTML and JavaScript code ...

article image
»

3 jQuery/JavaScript Plugins for Push Notifications

Push notifications started from the mobile business but this ...

article image
»

Create Smooth Animation Using jQuery’s “stop()”

Making Quick Work jQuery’s animate() method is a quick way to ...

article image
»

Check all checkboxes in HTML table using jQuery

HTML tables are a very handy and useful element. They can adapt to ...

article image
»

Changing images in a loop on hover using jQuery

Why use this Function? Changing images in a loop on mouse over is a ...