I was throwing together a prototype site last night and I thought it might be nice to aim for XHTML 1.1 Strict compliance, really just for kicks. Most of the time, this is no big deal, but I was stuck on one need that the site had: open off-site links in a new window. The target attribute is a big no-no in XHTML Strict and while I’m not really a purist, it was somewhat bothersome that I only had one error left without a good markup-based solution.
One of the tenets of XHTML is to force (strictly!) the user-agent to be responsible for the agent-specific actions on the page. In this case, since a modern browser on a modern OS can handle a “new window”, the browser should handle it. But, the same site, when rendered in a different browser (e.g. Safari on the iPhone) might not be able to handle a new window, so the markup itself shouldn’t add such an instruction. Sounds annoyingly simple enough, except when I want the non-standard action.
Enter JavaScript, which shouldn’t surprise me since I want to manipulate the DOM within browsers that can handle it. A quick google led me to an example over at Sitepoint using Javascript to add the target="_blank" attribute after the page loads:
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;
This really seemed inelegant to me. I’m already using jQuery on the site for something else, so I re-wrote the above into a jQuery chain, which just feels better:
$("a[rel='external']").attr("target","_blank");
