How to use jQuery to open external links in a new window

A common request from clients is to open all external links on their website in a new browser window. (Leave aside for now whether this is a good idea or not, and just assume that you need to do it.) It’s easy enough to add target="_blank" to a link, but there are two problems. First, the target attribute is deprecated, so we don’t want to use it in our nice standards-compliant code. Secondly, on a large content-managed site, you might not have control over every link.

jQuery to the rescue! We can use $("a[href^=http://]") to select all links that start with http:// and then .attr("target","_blank"); to add the target attribute so they will open in a new window.

But now we have a new problem. In a content-managed system, the site will commonly render all links, even local ones, using a full URL. Now your jQuery is opening every link on the site in a new window. So we’ll write a few more lines of code to remove the target attribute from local links.

$(function() {
  $("a[href^=http://]").attr("target","_blank");
  $("a[href^=http://example.com/]").removeAttr("target");
  $("a[href^=http://www.example.com/]").removeAttr("target");
  $("a[href^=http://dev.example.com/]").removeAttr("target");
  $("a[href^=http://example.local/]").removeAttr("target");
  $("a[href*=.pdf]").attr("target","_blank");
});

As you can see from the example, I’ve removed it from any links that include the final domain name, both www and plain versions. I’ve also removed it from the dev site and from example.local, which might be a local installation of the site. You could add or remove any of these as needed, they’re just examples.

The last line is there because the client also wants all PDF files, whether on our site or elsewhere, to open in a new window, so we add the target attribute back on for any link that ends in .pdf.

How to use jQuery to target CSS at older browsers

On a recent project where I had to support Firefox 3.6, 3.0 and 2.0, I had to find a way to target a specific version of the browser due to differences in the rendering engine. It turns out the easiest way to do this is by using jQuery to detect the browser and add a class to the body tag.

// add a body class for firefox 2.0 only
if($.browser.mozilla && $.browser.version.substr(0,5)=="1.8.1") {
  $('body').addClass('ff2');
}
// add a body class for firefox 3.0 only
if($.browser.mozilla && $.browser.version.substr(0,5)=="1.9.0") {
  $('body').addClass('ff3');
}

The reason $.browser.version doesn’t appear to match is because for Firefox, jQuery actually detects the version of Gecko, the rendering engine. You can see which versions of Gecko line up to which versions of Firefox on this chart.

The dangers of browser detection have been covered in depth elsewhere, but in this case, I feel it’s acceptable because A) we’re detecting a browser version as well as a browser type, and B) we’re targeting old versions of the browser, whose usage in our stats are 5% or less (but for this particular client, we’re obligated to support them anyway). If someone has a better way, I’m open to it. In the meantime, this solved my problem nicely.