Open a link in a new window using jQuery

There are times when you pay want to force links to open in a new window. It could be to open terms and conditions, adverts or external links. Please note that some believe that you should never force a link to open in a new window as that decision should be left to the user. I will not debate this here, but rather explain how to do it should the need arise.

Specify a URL using attribute selectors

Background - CSS Attribute Selectors

In CSS, attribute selectors allow us to style a particular element with a given attribute. You can also style an element with a given attribute and a given value. This is known as a attribute value selector. For example:
HTML

  1. <a title="hello">a link</a>

CSS

  1. [title=hello] {
  2. /*styles */
  3. }

jQuery attribute equals selectors

This concept of attribute value selectors carries over to jQuery. If we want to force a link to a given URL to open in a new tab, we would use the following:

  1. $(document).ready(function(){
  2.  
  3. $('a[href=http://www.google.com]').click(function(){
  4. window.open(this.href);
  5. return false;
  6. });
  7. });

In this example, we are targeting a href attribute with a value of http://www.google.com. This is known as an attribute equals selector. window.open will open a new window with the link that has just been clicked (this.href). return false will prevent normal browser behaviour from occurring. In this case, when you click on a link, normal browser behaviour would be for the link to open in the same window, which is what we are trying to override.
So in this example, when a user clicks on any link to http://www.google.com, it will open in a new window. It does not matter where the link is on the website, as long as this jQuery has been loaded on the page. And we do not need to add any additional markup, as jQuery handles it all.

Specify a class

It is common to open links in a new window by targeting a class. In the example below, the link is for terms and conditions and the class is called terms.

html

  1. <a href="/terms" class="terms">Terms and conditions</a>

jQuery

  1. $(document).ready(function(){
  2.  
  3. $('a.terms').click(function(){
  4. window.open(this.href);
  5. return false;
  6. });
  7.  
  8. });

Target _blank alternative

The alternative to using javascript is to use the HTML target attribute. There are a few downsides, including:

  • It is not valid in strict XHTML
  • It clutters your HTML with another attribute
  • You have to edit your HTML to add the target attribute

Here is an example using the HTML target attribute:

  1. <a href="http://www.google.com/" target="_blank">Visit Google</a>

Enjoy this article?

Get my best content on Javascript, CSS, PHP & Git before anyone else and special bonuses.

Get started

Comments

This comes handy. Very well explained.
Thanx!

It's a nice explanation and I like that you have explained the alternative. IMO it would be even better if you provided an example though. Just a thought :)

Blair Wadman's picture

Good idea Tony. I have been thinking that too and will add demos soon.

I agree that ideally you should leave it up to users to choose whether to open a link in a new window or not. I just don't think that at the moment people are really used to doing that - though, in time maybe. A lot of web users still don't know that there are very simple ways to open links in new windows.

Wow... even though this is an old article, i just have to respond to it. I hope you are just trolling with this article, because this is just totally wrong in all possible ways.

Why in the world would you make something with javascript when you can make it with (valid) html? You should only use javascript when there is no other option or to improve the user experience. Neither is the case for opening links in a new window.

- "It is not valid in strict XHTML" - That maybe so, but that doesn't mean you should be using stupid workarounds instead. If you want to use the strict doctype, don't open links in new windows. Otherwise, use the transitional doctype.
- "It clutters your HTML with another attribute" - This is just a stupid reason. The javascript you show in your article is more bytes to download and clutters your javascriipt file, so that is even worse. But really, one small attribute doesn't clutter your html.
- "You have to edit your HTML to add the target attribute" - No shit, sherlock... you also have to edit your html to add a link and you have to edit javascript to add the onclick event. So what is your point with this reason?

So, to everyone reading this article: DO NOT USE THIS, it is totally stupid. You should never create weird and stupid workarounds like this for stupid reasons. Just use the target attribute, it's there for a reason.

Blair Wadman's picture

Thanks for your feedback.

To address each of your points:
- A lot of people want valid strict XHTML and want links to open in new windows and this provide the method to do that. If you are happy to use transitional, or not open links in new windows if using strict, then good for you.
- Fair point, although my point was not about the number of bytes to download.
- If you have thousands of links on a website and then decide you want to open them in a new window, you can add one onclick event to do it all, rather than thousands of target attributes.

I appreciate your opinion. However, you are plain wrong in advising everyone to not use this. It is perfectly valid in many circumstances. If people want to use the target attribute, then be my guest. I included that as an alternative and merely pointed out its downsides (nothing is perfect).

Another brave keyboard fighter!! what a mess. Watch your tone pal.

There's not many things totally stupid in web developing. One of them is posting in the tone you do, you dogmatic prick. Playing around with jquery might be more or less practical, but it will hardly turn into something totally stupid. To anyone reading this, you want to carry on with -target="_blank"- ? Cool. You want to play around with jquery and get used to its syntax for simple matters like this one? just fine too.

Never pay attention to smart fellas using such expressions as "No shit, sherlock..."

Kindly borrow a people skill from somebody...

Thanks Blair for sharing this tip.

Thank you very much for this informarion, best regards

Thanks for this explanation, although an old post you make a very good explanation of something basic that has escaped me altogether, the use of attributes. I tested it simply to open any link in a new window and that works fine too..

  1. $(document).ready(function() {
  2. $('a[href]').click(function(){
  3. window.open(this.href);
  4. return false;
  5. });
  6. });

I also thought at first the last two downsides where a little OTT but then I put my brain in gear and realized that with this method no html editing is necessary on a large page with a lot of links, especially automatic generated links in a web app or table from php etc....

There really is no need to insult people about what they present, as the concept learnt can be very valuable, so "brain in gear" would be the answer to some out there ;-)

Thanks for this post

Thank you for your code

Add new comment