Open External Links in New _Blank Window and Internal Links in Self Window

Javascript Method

Add the following javascript to theme.liquid and external links will open in a new _blank window, but internal links will open in same _self window.
$( document ).ready(function() {
    console.log( "ready to include external link script!" );
    $(function() {
        var links = document.getElementsByTagName('a'); 
        for(i = 0; i < links.length; i++){
          var current_link = links[i];
          var href = current_link.getAttribute("href")
          if( href.includes("//") ){
               current_link.setAttribute('target', '_blank');
             } 
        } 
    });        
});  

Liquid Method

This technique was first used on the USBC Bowling Store.

Inside the for loop and on the anchor tag write a script that checks if the link.url contains http. If it does then set the target to open in a new window.

{% if link.url contains 'http' %}target="_blank"{% endif %}
Below is a full code example for a basic linklist.
{% for link in linklists.main-menu.links %}
      <a href="{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% else %}target="_self"{% endif %}>{{ link.title }}</a>
{% endfor %}

Leave a comment