Javascript that makes all external links open in a new tab

Although best practice is to define individually where a hyperlink opens per link, you can use javascript to determine how external links work per page or even site-wide.

For instance, on my Tumblr-based portfolio site, I do not have specific control in my navigation to decide if included navigation links open in the same browser window or if they open in a new tab. To give myself more control, and to ensure that all external links opened in new browser tabs, I added a javascript function that forces all external links on my site to open in a new tab.

Javascript Code <script>

The javascript below runs and catches all external links and adds a "target=_blank" to them making them open in a new browser tab.

<script>
document.addEventListener('DOMContentLoaded', () => {
  const links = document.querySelectorAll('a');

  links.forEach(link => {
    const isExternal = !link.href.startsWith(window.location.origin);

    if (isExternal) {
      link.setAttribute('target', '_blank');
      link.setAttribute('rel', 'noopener noreferrer');
    }
  });
});
</script>

What to know about this script

DOMContentLoaded Event: The script runs once the DOM is fully loaded, which means it doesn’t block the rendering of the page.

Query Selector: It uses document.querySelectorAll('a'), which is efficient for selecting anchor tags <a></a>.

Simple Logic: The logic inside the loop is straightforward—checking if a link is external and then setting attributes. This is a lightweight operation.

How this Javascript’s function works

Here’s a breakdown of how it works:

1. Event Listener: The document.addEventListener('DOMContentLoaded', () => {...}); line sets up a function to be called when the DOM is ready.
2. Selecting Links: const links = document.querySelectorAll('a'); selects all anchor (<a>) elements in the document.
3. Looping Through Links: The links.forEach(link => {...}); loop goes through each link.
4. Checking External Links: It checks if each link’s href does not start with the current site’s origin (your domain name, such as designertofullstack.com), identifying it as an external link.
5. Setting Attributes: If a link is external, it sets the target attribute to _blank and the rel attribute to noopener noreferrer for security and performance reasons.

Noopener and noreferrer

• Including Noopener prevents the linked page from accessing your page’s window.opener property which keeps the linked page from controlling your original page. 

• Noreferrer prevents the destination page from receiving information about your page. This means the owner of the domain where you link to will not see that the traffic came from your page. You may want to remove “noreferrer” as a default in this code snippet, especially if link-building or affiliate links are part of your website’s strategy.

To remove both declarations, delete the semicolon from line 1 and all of line 2.

;
      link.setAttribute('rel', 'noopener noreferrer');

To remove just noreferrer, delete the space before and the term noreferrer.

link.setAttribute('rel', 'noopener');

Add External Links open in New Tab to WordPress via Snippets Plugin

If you’re trying to use this javascript code in WordPress, and specifically in the free version of the Snippets plugin, you can wrap the script in PHP. Insert and activate the following code; then test.

One gotcha I ran into was I was testing and clicking on links I knew went to external page and they weren’t opening in a new tab. The reason was not that this script was not running but instead the reason was because the external link was being set by an htaccess 301 redirect.

<?php
// Add external links JavaScript to the footer
function add_external_links_script() {
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const links = document.querySelectorAll('a');

            links.forEach(link => {
                const isExternal = !link.href.startsWith(window.location.origin);

                if (isExternal) {
                    link.setAttribute('target', '_blank');
                    link.setAttribute('rel', 'noopener');
                }
            });
        });
    </script>
    <?php
}

// Hook the function to the wp_footer action to ensure it's placed at the end of the page
add_action('wp_footer', 'add_external_links_script', 100);
?>

Happy Coding!