August 2, 2007
 at 3:12 pm
 in standards, web development

This question was brought up awhile back when I wrote my Standards of Web Design article. The question comes from Greenweaver

Anyhow, get your own off site links to use a (target=”_blank”) and open any links in a new browser window instead of people having to leave your site, DOh!!

The answer to this, while in technical terms is simple, turns out to be a bit complicated at this point in time. As Greenweaver correctly points out, in order to open up a hyperlink as a new window instead of in the same window, traditionally you would use similar code to the following:

<a href=”http://www.google.com” target=”_blank”>link</a>

In this code example, the target attribute tells the browser where the new link should be opened, whether it be the same window (default if left out entirely), a new window (_blank), or even another frame on the same page. However, in XHTML 1.0 Strict, the target attribute has been removed completely from the standards. So how exactly do we get a new window to open up when clicking a link?

The answer, in short, is two parted. While a new standard hasn’t been put in place yet (which I would very much like to see), the rel attribute has been added in XHTML 1.0 Strict. This is the relationship attribute and describes what this object is or how it should behave in relationship to everything around it. The accepted standard at this point is to use rel=”external” in order to create a link relationship that will cause the page to open in a new window. However, by itself, this will not happen. This just describes the relationship.

In order for the new window to actually open, JavaScript must be used. This is where things get somewhat complicated. In the past, JavaScript use on pages was strictly prohibited, mainly because back in 2000/2001, a majority of browsers barely supported it, let alone few users actually had it turned on for security reasons. Times have changed. Not only do all major browsers thoroughly support JavaScript, an extreme minority of users switch it off purposely. So in effect, JavaScript is perfectly acceptable to use in small quantities.

However, the complications arise mainly with popup blockers. Built in blockers, such as those in Firefox, IE7, Opera, or Safari, do a perfectly fine job at being able to understand when a link was physically clicked by the user and to allow that popup. Other third-party vendors are a different story. Sometimes they won’t allow any form of a popup to show. The good news is these are few at this point, so again, I wouldn’t worry too much about those users.

Anyway, the JavaScript code to grab the rel=”external” attribute and open it in a new window should look similar to this:

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;

Put this code in a file and name it something like rel_external.js

In order to load this, put the following code in your head section.

<script type=”text/javascript” src=”/rel_external.js”>
</script>

All in all though, the question arises, why should the web designer dictate how a hyperlink to an entirely different page opens? With modern browsers which have tabbed interfaces, it should be up to the user how the new window opens. I would very much advocate not using this method and having all external hyperlinks open in the same window if even if they have to navigate away from the site. And indeed, on this site, you’ll notice no links open in a new window.

Why? Those are the standards without having to resort to JavaScript, and ultimately, it’s the user’s decision, not mine.

Bookmark this post:
 del.icio.us    digg this    technorati