This is a very common request by clients, mostly for SEO reasons they want a jQuery solution to open all external links in a new tab. So I thought I would share my quick and easy solution.

You could do an event listener on all links but that’s way too much JS. The browser is capable of doing this based on what target tag is on the link. So all we have to do is collect all external links and modify the target attributes on them.

jQuery open all external links in a new Tab

  1. Make sure jQuery is loaded in your website

    Fairly easy but necessary step, just open your browser debug console for the website by hitting the F12 key and type $('body')and make sure it returns a result.

  2. Select all links and filter down by the ones that have external links

    I achieve this with a jQuery selector but filtered based on :
    – if the link has a host name at all, to handle handle relative URLs
    – check if the host name is not the same as window location hostname
    Would looks something like this

    var extLink = $('body a').filter(function() { 
  return this.hostname && this.hostname !== location.hostname
});

// Modify the $('body a') to what best fits your needs

    This collects all links that point to a different site than the one you are on

  3. Iterate the list and swap and add a target _blank

    Now all we have to do is to iterate through the list and add a link attribute of target with the value of _blank which tells the browser to open the link. Here is an example code for this

      extLink.each(function(){
    $(this).attr('target', '_blank');
  });

  4. Here is how the code looks all together 

    var extLink = $('article.node--view-mode-full a').filter(function() { 
  return this.hostname && this.hostname !== location.hostname
});
extLink.each(function(){
  $(this).attr('target', '_blank');
});

Add the jQuery script to your WordPress Theme

Adding it to WordPress should be fairly easy jsut follow the steps in my blog post about How to add Javascript file to a WordPress theme

And you should be all set.

jQuery open all external links in a new Tab for Drupal Website

In case of a Drupal website you would need to wrap the code in a behaviors block, it would look something like this.

(function ($, Drupal) {
  'use strict';

  let linksProcessed = false;

  Drupal.behaviors.node_link_target = {
    attach: function (context, settings) {

      if(!linksProcessed){
        var extLink = $('body a').filter(function() { 
          return this.hostname && this.hostname !== location.hostname
        });
        extLink.each(function(){
          $(this).attr('target', '_blank');
        });
        linksProcessed = true;
      }

    }
  }

})(jQuery, Drupal);

The linksProcessed flag variable is only there to make the code run faster as Drupal tends to load and reload JS based on what dynamically gets added onto the page afterwards.

If you see that some links are not being processed, it probably means they were added after your code ran, and you should probably remove that flag and conditional all together.

Refine the jQuery selector for optimization

Targeting all links within the body may be a bit overwhelming if you aready know the header and footer menu is working correctly. Maybe you only need to target the inner article content, etc.

If you need help you can find tutorial to “refresh your jQuery selectors” knowledge.

I read your comments, let me know if this helped you!

Lehel