External links can be found on almost every website. And it is often desired that external links open in a new window – for example, to avoid losing visitors to the website via such an external link. The target instruction “_blank” makes this very easy to achieve. But how can you ensure that all external links always open in a new window?

Sometimes external links are conveniently managed in the CMS via separate input fields, but often external links can be found in the content of the page – in the body text. The links are then created via the text editor – and it happens again and again that the editors fail to mark the link as an external link or to set the checkmark for the target instruction “_blank”.

With the help of the following small jQuery code snippet, this problem can be easily solved:

<script>
jQuery("html a[href^=http]").each(function(){
    if(this.href.indexOf(location.hostname) == -1) {
        jQuery(this).attr({
            target: "_blank",
            title: "Opens in a new window"
        });
    }
});
</script>

First, the script searches for all link elements that contain “http”. Local links that begin directly with the top directory and not with the domain name are therefore ignored from the outset. The second line checks whether the specified host name or the domain listed in the link differs from the DOmain on which the script is located. The following code is therefore only applied to links that refer to websites other than your own.

In the following two lines, the target instruction “_blank” and a title tag with the note “Opens in a new window” are added to the links. This has already solved the basic problem: all external links are now opened in a new window.

In the following, two more code snippets are added, which may be useful if you want to design external links differently than internal links using CSS, but this time the script does not refer to the entire HTML code of the page as an example, but only to the content within the DIV container with the class “entry-content”.

The first part therefore remains as it is – only the selection has been restricted here to the DIV container with the “entry-content” class as an example.

This is followed by a one-liner that adds the CSS class “external” to all external links or all links that open in a new window. This means that the link could already have its own design.

To make things a little more convenient, a SPAN container is now added to the link in the third code snippet. Thus, for example, the ::before selector or the ::after selector can be used to add a pictogram to the link, which visually indicates that clicking on the link leaves the page in a new window.

<script>
jQuery(".entry-content a[href^=http]").each(function(){
    if(this.href.indexOf(location.hostname) == -1) {
        jQuery(this).attr({
            target: "_blank",
            title: "Opens in a new window"
        });
    }
});

jQuery('.entry-content a[target="_blank"]').addClass('external');


jQuery('.entry-content a.external').each(function(){
    jQuery(this).each(function(){
      jQuery(this).wrapInner('<span></span>');
    });      
});
</script>

And that’s it. External links can be automatically opened in a new window using a small jQuery snippet.