External Linking with XHTML and jQuery

Many of you may be familiar with the behavior on this blog and the Panda’s Thumb that links to external websites open a new window or tab. In old fashioned html, this would be accomplished by adding a “target” attribute to your link:

<a href="http://scit.us/" target="_blank">Scitus</a>

However, with the advent of XHTML, content was separated from style and behavior, and the target attribute was officially retired; although, it is still recognized by standard browsers. Instead with XHTML, the proper solution is to use the “rel” tag to show how the linked page is connected to the current page:

<a href="http://scit.us/" rel="external">Scitus</a>

Perhaps you are using a browser that understands this but are probably not; therefore, we use a line of javascript to tell the browser what to do with those links:

$(function(){$('a[href][rel*=external]').each(function(i){this.target = "_blank";});});

The above code is very cryptic because it relies on shortcuts provided by the jQuery library. With prototype you can do use something equally cryptic like this:

function externalLinks() {
	$$('a[href][rel~=external]').each( function(value, index) {value.target = "_blank";});
}
Event.observe(window, 'load', externalLinks, false);

Sure, it’s more complicated than the original, but it wouldn’t be progress if unless they made things harder to do.