Open links in a new window
In the transistion to XHTML, many webmasters are shocked to discover that links with target="_blank"
(which would
typically cause the link to open in a new window) prevent their page from validating. This is actually part of the
behavior of the link, and (to use proper MVC seperation) therefore
should be handled by a scripting language instead of embedded into the markup. One common approach to this is to use
the relation attribute by setting rel="external"
. A bit of javascript is then used to walk over your page looking for
links with this “external” designation and setting them to open in a new window.
After using this technique for a while, I discovered the links I typically (but not always) wanted to open in a new window were those that left my site. I then alterred my javascript function to allow for this and ended up with…
function externalLinks() {
host = (document.location + "").replace(/^(https?:\/\/)([^/]+).*/i, "$2");
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")) {
if (anchor.getAttribute("rel") != "local") {
if (anchor.getAttribute("rel") == "external") {
anchor.target = "_blank";
} else {
hrefData = anchor.getAttribute("href").match(/^https?:\/\/([^/]+).*/i);
if (hrefData && hrefData[1] != host)
anchor.target = "_blank";
}
}
}
}
}
Call this function when the page loads by changing your body
tag to be <body onload="externalLinks();">
. This will
implicitly cause all links that go off-site to open in a new window while still allowing you to explicitly force any
link to open in a new window by using rel="external"
. Additionally, you can use rel="local"
to explicitly force an
off-site link to NOT open in a new window. For example, if your site were hosted at www.foo.com
, then
<a href="http://www.foo.com/"></a>
would open in the same window,
<a href="http://www.foo.com/" rel="external"></a>
would open in a new window,
<a href="http://www.bar.com/"></a>
would open in a new window, and
<a href="http://www.bar.com/" rel="local"></a>
would open in the same window.