Open links in a new window

April 22, 2005 by Will Norris

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.