We Recommend

Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

zensir on 08/23/06

Tagged

javascript html webstandards open newwindow

Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

luman
cwoodley
shameel

New-Window Links in a Standards-Compliant World

Published in: JavaScript

URL: http://www.sitepoint.com/article/standards-compliant-world

Much to the chagrin of Web designers everywhere, the HTML 4.0 Strict and XHTML 1.0 Strict recommendations of the W3C no longer include the target attribute of the tag. The Transitional versions of the specifications still include it, but by definition, these specs are on the way out.

Whatever your personal feelings on the practice, 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. 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? Idealism Applied

The Web standards are written with a lot of ideals in mind. In many cases, established practices go by the wayside in favour of "the right thing to do". One of the ideals that is expressed by the removal of the target attribute from the Strict standards is that (X)HTML should only be concerned with the information that's displayed within a browser window.

Consequently, as soon as we start talking about opening new browser windows, the idealistic notion is that we have exceeded the responsibilities of (X)HTML and entered the world of client-side scripting (i.e. JavaScript).

But before we dive into the JavaScript code necessary to open a link in a new browser window, we still have a fundamental problem to solve. We still need a way to mark links that should be opened in a new window, and if we can't use the target attribute to do it, we need to find some other way -- a way that fits with the ideals behind the latest (X)HTML standards. A New Relationship

The HTML 4.0 specification took away the target attribute, but it added another attribute: rel. This attribute is intended to specify the relationship between the document that contains the link, and the target of the link. The specification defines a bunch of standard values for this attribute (e.g. next, previous, chapter, section), most of which have to do with relationships between small sections of a larger document. However, the spec leaves the developer free to use nonstandard values for site-specific purposes. Here at SitePoint, we have adopted a custom value for the rel attribute to mark links leading to other Websites. These are the very same links that we want to open in a new browser window. For these links, we set the rel attribute to external.

Before:

external link

After:

external link

So, now that we have our new-window links marked up in a standards-compliant way, we need to write the JavaScript that will cause them to actually open in a new window.

Plain TextExpand

<script type="text/javascript">
 
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;
</script>
 
html:
<a href="document.html" rel="external">external link</a>

Report this snippet

Comments

Subscribe to comments

Posted By: heinz1959 on March 15, 2008: This just brings back the deprecated "_blank" attribute by using JavaScript.

Comment:

You need to login to post a comment.