Open links in new tab using jQuery

The most common way to open links in a new tab is to middle click the link in the web browser or right-click. To open a link in a new tab by default you need to add target="_blank" to the hyper links, but this would get annoying over time if you have to add this to every link in your source. You can add this simple jQuery snippet to your source to open every external link in a new tab of the web browser. If you don’t have jQuery already you need to get it first link or use Google’s hosted library CDN for jQuery.

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You need to load jQuery before this script loads or else this script won’t work.

 <script type="text/javascript"> 
 $(document).ready(function(){
 $('a').each(function() {
 var a = new RegExp('/' + window.location.host + '/');
 if(!a.test(this.href)) {
 $(this).click(function(event) {
 event.preventDefault();
 event.stopPropagation();
 window.open(this.href, '_blank');
 });
 }
 });
 });
 </script>

CoffeeScript version.

$(document).ready ->
  $('a').each ->
    a = new RegExp('/' + window.location.host + '/')
    if !a.test(@href)
      $(this).click (event) ->
        event.preventDefault()
        event.stopPropagation()
        window.open @href, '_blank'
        return
    return
  return

Author: Darryl

I am a self-taught programmer and CG Artist, I write on programming and 3D Animation, tips, and tricks and my experience with things, sometimes I write content on demand if the topic interests me. I love sharing knowledge,

Leave a Reply