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)

#1 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...

#2 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"]

#3 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.

#4 eksith on Jan 28th, 2008

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

#5 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.

#6 Paul on Apr 10th, 2008

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

#7 Cory S.N. LaViska on Apr 10th, 2008

That will help, thanks Cory

#8 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.

#9 Cory S.N. LaViska on Apr 26th, 2008

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

#10 Michael Sharman on Jun 1st, 2008

asdf

#11 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;
});

#12 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!

#13 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.

A Beautiful Site

Search the Notebook

Popular Entries

Related Entries

Archives

Announcements