background image
HomeRecent PostsDrupalSearchTagsRSSContactAboutAccount
Eric.London's picture

This quick code snippet will show you how to update every external link on your site to open in a new window using jQuery. You can put this code in the script.js file in your theme.

$(document).ready(function(){

  // apply to all <a> tags that have an href that starts with "http"
  $("a[href^='http']").each(function(){

    // remove http:// and https://
    link = $(this).attr('href');
    if (link.substring(0,7)=='http://') {
      link = link.substring(7);
    } else if (link.substring(0,8)=='https://') {
      link = link.substring(8);
    } else {
      return;
    }

    // spilt on '/'
    split1 = link.split('/');

    // compare href hostname to site hostname
    if (split1[0]!=location.hostname) {
      // add target attribute to link
      $(this).attr('target','_blank');
    }

  });

});

Eric.London's picture

It increases usability to indicator that an external link is going to open a new window. Here is a code snippet that shows how I added a few lines of jQuery to append a "new window" icon to each <li> in my news aggregator block:

<?php
<script type="text/javascript">
var
themePath = '< ?php print base_path() . path_to_theme(); ? >';
$(
document).ready(function(){
 
img = "<img src='" + themePath + "/images/new-window-icon.jpg' />";
  $(
'div.block.block-aggregator div.content div.item-list ul li').each(function(i){
    $(
this).html( $(this).html() + img );
  });
});
</script>
?>

Syndicate content