Using Blank Target with the Strict Document Doctype

January 4th, 2009 Filed under: Tutorials by Andrew

One of my biggest pet peeves with the strict document doctype is the inability to validate pages using the “target” attribute in your link tags. The World Wide Web consortium believes the user should be in control of the location of a new link, not the author. I personally don’t quite agree. Given a huge list of links, I find it annoying trying to navigate back to the originating page after visiting 5 or 6 pages. That’s a lot of clicks on the back button. I know that I should be a savvier internet surfer and utilize the browser’s history feature, but if I’m not doing it, then I know for a fact that the majority of users are also behaving in a similar fashion. As an alternative to reeducating the majority on how they should surf, the next best option is integrating a little bit of JavaScript code into you website to get around W3C’s specs, and still properly validate your pages.

The first think to consider is integration. I know a lot of the solutions floating around the internet consist of placing an “onclick” event handler right in the anchor tag, but we don’t want to do this. The first reason is that it makes ugly code that’s much more difficult to maintain, and second, we want to keep behavior and content as two separate entities, which means externalized JavaScript. Just as we try to keep visual styles and content as two separate entities through CSS stylesheets, so we should do with dynamic behavior.

To start things off, I create the basic html page with several links, as well as a blank JavaScript page named functions.js that is referenced in the head section.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<script src="functions.js" type="text/javascript"></script>
<title>Using target with the Strict Doctype</title>
</head>
<body>
<h1>Test JavaScript target using the Strict Doctype:</h1>
<ul id="jstargets">
   <li><a href="http://www.google.com">Google</a></li>
   <li><a href="http://www.yahoo.com">Yahoo!</a></li>
   <li><a href="http://www.live.com">MSN Live Search</a></li>
   <li><a href="http://www.ask.com">Ask.com</a></li>
   <li><a href="http://www.altavista.com">AltaVista</a></li>
</ul>
</body>
</html>

Note that I gave the ul an id of “jstargets”. This is very important. We want to make sure that the links we want affected are encompassed by a parent element with a unique identifier that JavaScript can access. Otherwise, the code we use will affect every link in the document.

Now we start working on the JavaScript. Open the functions.js file. First we initiate a function when the window loads.

window.onload = initLinks;

Next, we define the initLinks function.

function initLinks(){
}

This function will initiate a loop that iterates through each link in the document. Then we check if the link has a parent element with the id of “jstargets”. If it does, we set the links to have a target of “_blank”.

function initLinks(){ 
   for(var i=0; i<document.links.length; i++){
      if(document.links[i].parentNode.parentNode.id == "jstargets"){
         document.links[i].target = "_blank";
      }
   }
}

That’s it! Pretty easy and painless, best of all, our xhtml markup looks nice and clean, since we’re using an unobtrusive JavaScript technique. Also, this code is very flexible and will work no matter how many links we use, so there’s no need to edit it. Easy maintenance!

View a working example of this JavaScript technique.

« Out with the old…
Is Your Website Ready for Internet Explorer 8? »

One Response to “Using Blank Target with the Strict Document Doctype”

  1. Although this is one way of applying the blank target to links, I would probably use a different method these days. One problem with the above method is that if a link element lacks an upper level parent element, the browser will throw a JavaScript error. A better and more efficient method would be to target links directly through the ul’s id. This would also be better for performance, as then the browser wouldn’t have to iterate throught all the links in the document.

    function initLinks(){
   var theUL = document.getElementById("jstargets");
   var theLinks = theUL.getElementsByTagName("a");
   var theLinksLgth = theLinks.length;
   for(var i=0; i<theLinksLgth; i++){
      theLinks[i].target = "_blank";
   }
}

    jQuery would be even easier. All you would need is:

    function initLinks(){
   $("#jstargets a").attr("target", "_blank");
}

Leave a Reply

You must be logged in to post a comment.