create xhtml strict external links with jquery
Mar
15
1
0
If you're anything like me when coding to the XHTML strict doctype, you get annoyed when things break your validation (Youtube, I'm looking at you). I've seen many a flame war over whether or not to let external links open a new window. It's not my intention to rekindle the flames, so lets just say this: Sometimes you just have to do what the client wants. Besides, who am I to argue? After all it's their site that they are paying me to build.
With that being said, now comes the question about how to allow links to open a new window without breaking your strict validation with the deprecated target="_blank" attribute. I've found that auto-detecting the link with jquery has been a fairly elegant and painless solution.
At this point it's worth noting that the target attribute will no longer be deprecated in HTML5, so our good friend target="_blank" will be back. But until HTML5 is better supported (cough Microsoft) we're going to be stuck with alternate solutions; so let us tarry forth.
The first thing I do is to organize my site so that all internal links are relative, and external links are absolute (starts with http://). With that in place I can then open a new window whenever I detect an href that contains http://.
$('a[href^="http://"]').click(function(event) { return !window.open(this.href); });
That's a nice start, but there are rare occasions where I'd like to open a new window for an internal link, and keep an external link in the same window. For these outliers I override the script by adding a rel="internal" or rel="external" into the <a> tag and handle it with the javascript. So the complete script looks like this:
$(document).ready( function() {
$('a[href^="http://"]').click(function(event) {
if($(this).attr('rel') != 'internal') {
return !window.open(this.href);
}
});
$("a[rel='external']").click(function() {
return !window.open(this.href);
});
});
<a href="/page">stays in the same window</a>
<a href="http://example.com">opens a new window</a>
<a href="/page" rel="external">opens a new window</a>
<a href="http://example.com" rel="internal">stays in the same window</a>
And this will cover 99% of my needs.