@monicadavisf ohh, he was Lucas? I was trying to remember what I had actually seen him in, but didn't care enough to go to imdb.

Use jQuery to Open All External Links in a New Window

In a recent project at work, I had completed implementing a site, and the client was reviewing it. Their company decided that they wanted all external links to open in a new window. This is not a practice that I really like, and others agree:

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer’s carpet. Don’t pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management). If I want a new window, I will open it myself!

Jakob Nielsen: The Top Ten Web Design Mistakes of 1999

Breaking the back button is never a good thing. But this article is not about that.

Back to the site I was implementing. I was really not interested in adding target="_blank" to every single external link, so I came up with a better solution…

The Solution

The site was already using jQuery for other functions, so I figured that I should just use some of its powerfulness to make my life easier.

With a couple lines of code, I solved my problem:

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

Check out the demo to see the results.

Explanation

If you know anything about attribute selectors, that should look familiar to you. Basically, it is saying, apply the attribute target="_blank" to all links that begin with http.

Really easy, really powerful, problem solved. Some may say it almost might be preferable to browse the site with JavaScript disabled so that the external links would just open in the same window. But that debate is for another time.

Share This:
  • del.icio.us
  • Digg
  • Twitter
  • Facebook
  • StumbleUpon
  • Google Bookmarks
  • NewsVine
  • Technorati
  • Reddit
  • LinkedIn

RSS feed of comments for this entry

  1. i love you and jQuery ;) Thanx!

  2. Thats good, I’m doing the same thing my self, but have extended it to not process links to the same domain, and pdfs:

    function initExternalLinks() {
    	var h = window.location.host.toLowerCase();
    	$("a[@href^='http']:not(a[@href^='http://" + h + "']):not(a[@href^='http://www." + h + "']), a[@href$='.pdf']").attr("target", "_blank");
    }

    May be a more elegant way of doing it, but it works

  3. Whoops, slight error there – in the “not” filter, need to remove the a tags:

    function initExternalLinks() {
    	var h = window.location.host.toLowerCase();
    	$("a[@href^='http']:not([@href^='http://" + h + "']):not([@href^='http://www." + h + "']), a[@href$='.pdf']").css({outline: 'solid 1px red'}).attr("target", "_blank");
    }
  4. Thanks. This is simpler (and more up to date, the @ symbol is no longer required)

    jQuery("a[href^='http:']").not("[href*='mydomain.com']").attr('target','_blank');
  5. @Roger-
    Thanks, that makes sense if you have internal URLs that are absolute. One thing I might change is to have the attribute selector select links that start with http and not http:.

    Want to make sure to account for https links.

  6. Hi,

    I just spent a while trying to work out why this did not work for me – looks like it’s incompatible with jQuery 1.3.1 but works OK with your 1.2.6 code.

    Any ideas on what the problem is? How to fix?

    Thanks.

    David.

  7. @David-
    Try removing the @ from the selector.

    See a Demo

  8. Brilliant. I guess it’s easy when you know how? :)

    Thanks very much, Trevor. Much appreciated.

  9. A heads up for everyone else: I run most of my HTML through HTML Tidy (via http://www.topstyle4.com/) to check for errors and format it. Part of that forces CDATA around embedded JavaScript to make it validate with XHTML. E.g.

    That stopped the code working for me.

  10. @David-
    I would not recommend using embedded JavaScript in production. I would definitely move it to an external script.

    • Vladimir Graschenko
    • 5.4.2009 at 8:42 pm
    • #
    • Reply »

    The following code works if you need apply the “new window” rule for all dynamically added links. Useful for UI Tabs or Ajax load.

    $("a[href^='http:']:not([href*='" + window.location.host + "'][target='_blank'])").live('click', function(){
    		$(this).attr('target','_blank');
    	});
    
  11. Thanks Trevor for the snippet and everyone else for input. Great little piece of code.

    • 5.2.2008 at 5:00 am
    • #
    • 5.8.2008 at 3:44 pm
    • #
    • 1.2.2010 at 9:28 am
    • #

Speak Your Mind

* Denotes Required Field

  1. To post code snippets, use <pre><code>YOUR CODE HERE</code></pre>
Me, Trevor Davis. My blue steel face…

Hi, I’m Trevor Davis

I’m a 25 year old Front-End Developer living in Arlington, VA. I work full-time at Viget Labs and freelance on the side.

I specialize in CSS, HTML, jQuery, WordPress & ExpressionEngine. See more of my work, and then hire me.

Recent Work

  • 4th District IBEW Health Fund
  • Employers Council on Flexible Compensation
  • Monica Davis
  • The National Christmas Tree
  • Matrix Group International
  • The MatriX Files
  • Wireless Career
  • George Washington Wired
  • Direct Selling 411
  • Makeup Bizz
  • InstallNET
  • National Park Foundation
See More of My Work

Asides