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.

Delicious Links Resolution

So, I killed the automatic Del.icio.us link posting. Long story short, it was going to be a big pain in the butt to get it working again, and I was questioning whether I wanted it back at all. Originally, I set it up because I was distrustful of Del.icio.us as a long-term archiving scheme, and I didn’t want to lose all my links if they ever went away. However, in the intervening years, they got bought by Yahoo, and I also started using other third-party services, none of which are archived here on the blog, so my original motivation for using the archiving script was gone.

I know several of you said that you liked the feature, and I apologize. However, there are still several ways to get at my links if you’re interested.

  1. The most recent links will still show up in the sidebar on every page.
  2. You can view them directly on Del.icio.us by clicking on Links up in the header.
  3. If you’re using a feedreader, you can subscribe to a new feed I created that merges my blog posts with my Del.icio.us links. I’ve added a link to the new Full Entries plus Links feed in the Subscribe box in the sidebar.

Delicious Links

Well, it looks like the script I use to post my delicious bookmarks here every week has broken. I’m working on fixing it, but this happens to coincide with me wondering lately if it makes sense to keep posting my links into my blog.

At first, the goal was that everything I did online was found here. But with the rise of Flickr and Twitter, that’s become impractical. As a result, I’ve been toying with the idea of killing the automatic link posting, and instead pointing the “links” link up in the header to my Delicous Account.

So, what do you think? Do you prefer a blog that includes everything a person does online, so you only have to look in one place, or do you prefer when things are kept separate so you can just subscribe to the bits you’re interested in?

Please leave a comment with your thoughts.

41 Useful CSS Links

I was clearing out my bookmarks recently, and noticed that I had a pretty large collection of web development and CSS-related bookmarks that I never refer to any more, but might be useful to people who are just getting started with CSS. So with that in mind, here’s a collection of links, and I hope it helps you out! Continue reading