Drupal coder

Automatically open all external links in a new window using jQuery

We all know that to open a link in a new window, you have to specify the target attribute as '_blank' in your HTML link tag.

But this process is boring and it's very easy to forget this when typing an article, page, blog post, ... because you want to focus on your content.

Did you even know that in Strict HTML it isn't even allowed to use the target attribute? Personally I hate it when links open up in a new window but your client my argue that his visitors want this behaviour.

To make your and your webmaster/editor's life easier, I have written a few lines of jQuery code that will convert all external links (i.e. links that begin with http) to links opening up in a new window by injecting the target="_blank" behind the screens. So you never have to specify the target attribute again. This way your code is ready if you ever want to convert to the Strict flavour.

$(document).ready(function() {
  $("a[@href^=http]").each(
    function(){
	    if(this.href.indexOf(location.hostname) == -1) { 
        $(this).attr('target', '_blank');
      }
    }
  )
});
February 07, 2008

Comments

I like to use the following code for external links:

$(function() {
$('a:not([href=""])').each(function() {
if (this.hostname !== location.hostname) {
$(this).addClass('externalLink').attr('target', "_blank");
}
});
});

It has a couple advantages. It only selects actual external URLs, and I like to add the external class so that I can style the external links. Example, adding an icon to all external links.

A full tutorial can be found at:
http://www.unseenrevolution.com/2011/06/25/external-links-with-jquery/

great coding, but i like davies stuff from comment more, seems just less complicated

i have to agree with this completely:
"But this process is boring and it's very easy to forget this when typing an article, page, blog post, ... because you want to focus on your content."

$(document).ready(function() {
$("a[@href^=http]").each(function() {
if(this.href.indexOf(location.hostname) == -1) {
$(this).click(function(){window.open(this.href);return false;});
}
})
});

missing ; at line 6. now work

$(document).ready(function() {
$("a[@href^=http]").each(function() {
if(this.href.indexOf(location.hostname) == -1) {
$(this).click(function(){window.open(this.href);return false;});
}
});
});

@kurin thanks for providing the only piece of code that actually works!!!

Worked for me! Cheers mate

Thank you thank you thank you!!! Saved me a lot of time.

Try this code instead.

$(document).ready(function(){
$("a[href^='http']").attr('target','_blank');
});

Hi Geshan, I agree this is a good solution for beginners.

But the less modules, the more lightweight your application. And for something as simple as this, I'd use custom javascript.

Why bother coding just use the external links (ext links) module it'll do the job with a icon for external and mail links, how cool is that?
Geshan

Is it possible to make poll result open up in a new window, instead of on the same page. I don't think it would be possible to use this script. Any other idea?

Just put this in your page template. In the head section, in an included javascript file or in the body (try to put it close to the body end tag - ).

And don't put it in drupal.js. That's a core file. Never touch those.

Where would I go about inserting this code into my site? Does it go into drupal.js?

If you don't want to add target attributes to the DOM you could use this instead. Otherwise, it's a great tip although using jQuery isn't strictly necessary.


$(document).ready(function() {
$("a[@href^=http]").each(function() {
if(this.href.indexOf(location.hostname) == -1) {
$(this).click(function(){window.open(this.href);return false;});
}
})
});