External Popup Links Using jQuery

Written by Cory S.N. LaViska on November 14th, 2007

How to make XHTML links that popup a new window and degrade gracefully using the jQuery JavaScript Library.

With the deprecation of the target attribute in XHTML Strict, opening links in new windows has become a bit trivial, if not annoying, to standardize. I always look for a consistent, unobtrusive approach that degrades gracefully; and since I use jQuery quite frequently, this is how I usually handle them.

The solution is a small piece of jQuery code in your $(document).ready() section:

$(document).ready( function() {
   
    $('A[rel="external"]').click( function() {
        window.open( $(this).attr('href') );
        return false;
    });
   
});

Now, add rel="external" to all of the links that you want to open in a new window:

<a href="http://domain.com/" rel="external">Domain.com</a>

From here on out, users that have JavaScript enabled will receive external pages in new windows, while those without JavaScript will still be directed to the appropriate location.

I use rel="external" because it’s generally a good practice to limit popup links to external websites only. You could very well use rel="popup" instead, but I prefer the former for semantics.

Comments

Wouldn't <code>rel="external"</code> be even more semantic? (via http://www.sitepoint.com/article/standards-compliant-world)

— Martijn van der Ven on Nov 20th, 2007

Martijn: A stylish argument, but I prefer class because it allows you to style external links separately. That is a valid point, however, and according to the W3C, you are correct. I'll have to ponder that one...

— Cory S.N. LaViska on Nov 20th, 2007

I also agree with Martijn. With CSS2, you can style links using the REL attribute (but lowly IE6 won't render it). Use this selector: a[rel="email"]

— Dennis on Nov 21st, 2007

You can still use CSS without using a class for it.

Your styles are still customizable using selectors :

a[rel^='external'] { color:#333; }

And your code is still correct :

$(document).ready( function() {

$("a[@rel=*external]").click( function() {
window.open( $(this).attr('href') );
return false;
});

});

Prolem solved without adding any non-semantic or multiple classes in your HTML.

Keep the HTML clean while tinkering with the CSS and JS, I always say.

— eksith on Jan 28th, 2008

Anyway to specify the dimensions of the poped-up window?

— Shir on Mar 11th, 2008

Thanks for the tip.

How could you create a popup window where you can specify the size and get rid of the search bar, etc?

Having trouble finding info on this.

— Paul on Apr 10th, 2008

Paul, check out this link: http://www.w3schools.com/htmldom/met_win_open.asp

— Cory S.N. LaViska on Apr 10th, 2008

That will help, thanks Cory

— Paul on Apr 11th, 2008

I've thought a lot about this, and after using both class="external_link" and rel="external" I've come to decide that the latter is, indeed, the better of the two. Of course, IE6 doesn't support the attribute CSS selector, but more and more people are upgrading to IE7 these days. Since this is only a small design issue, I've decided not to worry about it. I have updated the article to reflect this decision.

Martijn, Dennis, and eksith: thanks for your suggestions regarding this.

— Cory S.N. LaViska on Apr 26th, 2008

Strange, this just does not work on Firefox 3 on Linux

— Michael Sharman on Jun 1st, 2008

asdf

— asdf on Jun 4th, 2008

Another method, which should work better with sites you do not have full control over (such as with CMS-driven sites used by multiple users), is to use jQuery to work out if the beginning of the link includes "http://"; and not the domain of the site.

$("#main a[href^='http://']").not("a[href^='http://bob.org']").not("a[href^='http://www.bob.org']").click(function(){
window.open(this.href,'external');
return false;
});

— Andrew Fox on Jun 11th, 2008

@Andrew,

Do you have a link to a website so I can credit you for that bit of code? I have been trying to work out how to do that and up you pop!

— Steven Hambleton on Jun 12th, 2008

Dean Edwards has written a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. Selectors such as a[rel="external"] will work just fine in MSIE. Creating happy, sexy, and clean code.

— Shawn Dones on Jul 8th, 2008

@#5
for a specific sized window just modify the code to the following:

window.open( $(this).attr('href'),this,'width=300,height=200' );

— stephen on Nov 5th, 2008

Thank you. I am use for my site. :)

— Vaycheslav on Dec 25th, 2008

i dont get it. im trying to put it on my media box in friendster, if you know that website. but it doesnt pop up a new window. please help.

— marah on Jan 8th, 2009

Found this one yesterday: http://hypertextjunkie.com/assets/js/jquery/dbpopwin/

— web2.0 guy on Feb 20th, 2009

Couldnt you do this instead:

$(document).ready(function() {
$('#content a').filter(function() {
// if this link/href is not the same as this site
if (this.hostname && this.hostname !== location.hostname){
// open in a new window
$(this).click(function() {
//alert("open in new win: " + this.hostname);
window.open(this.href);
return false;
});
}
})
});

— Paul Cripps on Mar 19th, 2009

People who do this should be banned from designing internet pages. Web browsers all offer modifier keys allowing users to open a link in a new window or a new tab IF THATS WHAT THE Y WANT.

Doing this in your site sends a very strong message to your users. That message is: "I have no respect for you and I want to annoy you"

— S.o.G. on Apr 7th, 2009

A colleague just pointed out to me that it doesn't NECESSARILY mean "I have no respect for you and I want to annoy you", and that it could in fact be very well interpreted as "I'm a re-purposed print designer / marketing droid who still really doesn't get that whole hypertext thing"

— S.o.G. on Apr 7th, 2009

Nice one... I do however have one concern or whatever I should call it...Applying this to my site, makes every link show a popup preview. Even those which are on my own site. How is it possible to exclude a domain in that piece of code you posted ?The opposite of this I can do, hehe that's easy. It's just to add a domain name

— siti di craps in rete on Apr 20th, 2009

any thoughts on pop-up blockers when using window.open? previously, i have done 'this.target="_blank"', which i know is deprecated, but i feel like target="_blank" gets around pop-up blockers, right?
thanks,
Atg

— aarontgrogg on Apr 30th, 2009

Or, S.o.G., it might mean "my corporate client's legal department mandates that we make it very clear that you are leaving our site."

— JenG on Jun 8th, 2009

@JenG - A prime example. I'm a huge advocate of usability, but let's face it: there are real world exceptions for everything. I don't necessarily agree with it, but realistically speaking it's oftentimes inevitable.

— Cory S.N. LaViska on Jun 8th, 2009

Is it deprecated for a reason...

This is just a workaround to make the page validate, so essentially you are tricking the validator, which is just as bad as a non-validating page.

— Luis on Jun 11th, 2009

@Luis - the HTML target attribute is deprecated, but window.open in JavaScript is not. Furthermore, there is no "tricking" the validator because there's nothing invalid happening here. We're simply using JavaScript to control behavior, which is exactly what it's intended for.

Although I agree that the average webpage probably shouldn't control whether or not pages open in new windows, it is often necessary in web-based application development. I am, personally, an advocate for Web Standards, but there is a time and place for everything, and it's not up to you or me to decide what kind of behavior other people's applications require.

— Cory S.N. LaViska on Jun 15th, 2009

Thank you Cory for this elegant solution. :)

— Ben H on Jun 16th, 2009

Add a comment

Name*

Email*

Never, ever sold or spammed :)

Homepage

Comment*

Sorry, plain text only :(