Updated – March 25, 2011 - The article has been modified to also be relevant to WordPress.
For what ever reason the Enki creator forgot that for the XHTML 1.x Strict recommendations the W3C no longer include the target attribute of the <a> tag. The simple fix would be to use the Transitional version since it still includes it, but since this specs is depreciated, one should stay away from it. This article shows a fix that is standards compliant.
The most common application for this attribute — opening a link in a new browser window with target="_blank" — is still useful on today’s Internet, especially since most (all?) browser still support it. So if the standards say we shouldn’t use it, how should we go about creating new-window links, while following the latest Web standards? The hint was found in my beta copy of the upcoming book HTML5 and CSS3 by Brian P. Hogan:
If you use target on your links, like:
<a href="document.html" target="_blank">external link</a>
you’ll want to look at using Javascript instead, as target is deprecated.
I don’t believe in reinventing the wheel, so I checked out the code generated by RapidWeaver for links and found the following:
<a href="document.html" rel="external">external link</a>
RW adopted a custom value of external for the rel attribute to mark links leading to other websites that are to open in a new browser window. Looks good to me, all I need now is a JavaScript that will actually make this happen.
Doing some googling I found the following code, origin unknown, that is being used by almost everyone that still wants this functionality:
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = ";blank";
}
}
window.onload = externalLinks;
The last line assigns the externalLinks function to the window’s onload event handler. This triggers the function when the document has finished loading.
I put the code into a file called external.js. For Enki the file is stored in /public/javascripts folder, and for WordPress it is in the /wp-includes/js folder.
To load it with every page the following line of code is added as part of the <head> section for Enki in the master layout file:
<%= javascript_include_tag ('external') %>
and WordPress in the header.php file:
<script type="text/javascript" src="/wp_includes/js/external.js"></script>
That’s it, feel free to use the code for your own site.
Add One