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.

Use jQuery to Open All External Links in a New Window