Make External Links Open in a New Window With This jQuery Plugin

Here’s a common problem. You want to make all of your links on your site that would lead visitors away to open in separate tabs. For example, if I wanted to tell you about this cool article by Troy Goode about working with LINQPad as part of a larger conversation, I probably would have it open in a new tab (as the one above does).

Of course, you can do this by adding target=”_blank” to all your external links, but that’s tedious to say the least. So here is a simple jQuery plugin I created to do the trick. (Yes I know there are others, but none seem quite right, so here is yet another.)

Download: Query.externalLinks

The usage is pretty easy. Pick a section to scan for external links and say go:

Here is a simple example (from my previous post on hotkeys). Click on the title or the twitter icon in the lower right to see it in action.

Currently, it works by adding target=”_blank” to all fully-qualified links. For example, the first link will be a new window, the second won’t:

<a href=”http://www.google.com”>google</a&gt;
<a href=”/contact”>contact me</a>

Hope you find it helpful.

Cheers,
@mkennedy

 

 

Submit a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s