Open external links in a new window and keep it compliant
As you might have noticed, similar to wikipedia, I have added a small icon next to all external links. Unlike wikipedia’s little arrow (
), mine (
) , also indicates that these links will open in a new window.
Now, opening a link in a new window is nothing new, but since we’ve moved from ‘HTML 4.0 Strict’ to ‘XHTML 1.0 Strict’, the recommendation for the attribute that tells links to open up in new a window; target=”_blank”, has been removed. This means that by adding the attribute target=”_blank” on your links, the page will not pass W3C Markup Validation (note: The Transitional versions of the specifications still allow the target attribute).
To work yourself around this you need to parse the markup (XHTML) with Javascript and assign the attribute (target=”_blank”) to links you wish to open up in a new window. Again, this is nothing new, but most of the tutorials here on the World Wide Web that deal with the matter, approach the problem from a different angel; normally adding a ‘class’ or a ‘rel’ attribute (e.g class=”external”) to the links too open the link in a new window. Then, while parsing the markup attach the target attribute (target=”_blank”) to the link that has the matching value of the ‘class’ or ‘rel’ attribute (e.g class=”external”).
New-Window Links in a Standards-Compliant World, is a good tutorial and example of that method.
But since I want to open only external links in a new window, instead of adding this attribute to all links, I just check whether the link is external or not while parsing it.
Here’s an example on how that function could look like. In the example I have also added the functionality to exclude links from this behavior. Simply add a ‘rel’ attribute with the value ‘ignortarget’ (e.g rel=”ignortarget”) to external links you still would like to open in the current browser window.
[...] My next thought was to write a javascript function. But I’m no big fan of the onload flickering behaviour. A webpage need to be fully loaded before any javascript kicks in, so everything done with javascript that changes the look of the site will be noticeable for the trained eye. An example on this is my external link script. Even if there may be ways around the flickering onload behavior, it didn’t feel like the right job for Mr javascript. [...]
[...] icon next to all links that will take you away from this site. Up until now I’ve been using a javascript function that I wrote and posted back in December 2006 to find all external links and add the icon. It’s quite a flaky and… ugly script, so I [...]