Targetting External Links to a New Window

The target attribute in HTML was declared to be obsolete with support for it to be dropped in a future version (in other words 'deprecated') because it was felt that the visitors to a page should be the ones to decide where it opens. Also with the introduction of tabs there are now three different places where a page can be opened and attempting to force it to open in a particular place simply restricts some visitors' options with still no guarantee that it will open where you want.

Using JavaScript to add the target attribute doesn't really solve the problem either. All that achieves is to add the obsolete attribute into the page after the page has loaded in the browser and allows you to trick the validator into thinking that your page is valid because the invalid attributes are added after validation. The only other reason you'd consider adding code to get links to open the linked page in a new window would be if you wanted to apply it in bulk to links in all your pages without having to rewrite the HTML in each page.

Let's consider the situation where you have a large number of pages with a mix of internal and external links and where you want the external links to open in a new window without using the obsolete target attribute. Since opening in a new window is a behaviour you are supposed to implement it using JavaScript. Of course modern JavaScript is supposed to be unobtrusive with the JavaScript kept separate from the HTML and so we will want to implement this in such a way that we can just attach the script to the bottom of the pages where we want the external links to open a new window without having to change any of the HTML in the page.

In implementing our solution this way we not only end up with something that can easily be added to web pages at any time without needing to make any changes to the HTML (except perhaps to add one extra script tag) but we also get to see how the modern unobtrusive way of attaching events into a web page works and acquire a few standard functions that can be reused for any other event processing that we want to unobtrusively add.

Three of the five functions that we have in this example code perform tasks that are needed for much of the unobtrusive event processing that we would add to web pages regardless of what processing that those events are intended to trigger. The three common functions are required to provide cross browser support between browsers that properly understand JavaScript and the old versions of Internet Explorer (8 and earlier) that ran JScript instead of JavaScript and therefore used different commands for the event processing.

The first function that we need for modern event processing in JavaScript is the one I call addEvent(). This function tests if the browser supports the JavaScript addEventListener() method and if so it rewrites itself to use that method for adding events into your web page. For the older versions of Internet Exlorer it rewrites itself to use the attachEvent() method that those browsers understand. This allows us to call the addEvent function and have it use the method that the browser supports to attach the event processing into the web page.

The second function we need for modern event processing in JavaScript is one to determine whichElement() the event processing has been called to process. With this example where we are adding code to open pages in a new window we need this function to determine which of the external links was clicked on as they all call the same function to perform the window opening.

The third common function we need is one to stop the default event from occurring. The default processing for an <a> tag is to load the page referenced by the href attribute in the current window and so we need the stopDef() function to stop this default from running when the JavaScript replacement processing runs.

There are a few other common functions for event processing that you might like to add to your library of common JavaScript functions but none of them are needed in order to obtain the functionality we need here.

The next function we need is the first of the two that are specific to the functionality we are trying to add. The newWin() function is the function we are going to call to open a new window. It calls the standard JavaScript method with '_blank' specified as the second parameter so that it will always open a new window rather than only opening a new window if the one named in the second parameter doesn't already exist. The first parameter needs to identify which page to open in that window and so we need the href attribute of whichever <a> tag triggered the call to this function in that parameter - with the whichElement function identifying that for us. Finally we need to call our stopDef unction to prevent the default action occurring.

The final function is the one that attaches the newWin function to all of the external links in the web page. It finds all the <a> tags on the page and for all of those where the href starts with 'http://' it attaches the newWin function so that it will run if that link is clicked.

Now this gives us quite a bit of JavaScript code compared to the various alternatives but most of the code that we have here is standard code that we would use across all our scripts and this extra code does mean that the JavaScript is completely separated from the HTML and will also not clash with any other event processing that we may want to attach to run when the link is clicked on.

addEvent = function(ob, type, fn ) {
if (window.addEventListener)
addEvent = function(ob, type, fn ) {
   ob.addEventListener(type, fn, false );
else if (document.attachEvent)
addEvent = function(ob, type, fn ) {
   var eProp = type + fn;
   ob['e'+eProp] = fn;
   ob[eProp] = function(){ob['e'+eProp]( window.event );}
   ob.attachEvent( 'on'+type, o[eProp]);
addEvent(ob, type, fn );
whichElement = function(e) {
var targ;
targ = (window.event) ? window.event.srcElement :;
if (3===targ.nodeType) {
   targ = targ.parentNode;
return targ;
stopDef = function(e) {
if (e && e.preventDefault)
else if (window.event && window.event.returnValue)
   window.eventReturnValue = false;
newWin = function(e) {,'_blank');
externalLinks = function() {
   var anchors, anchor, i;
   anchors = document.getElementsByTagName("a");
   for (i=anchors.length-1; i>=0; i--) {
         anchor = anchors[i];
         if (anchor.href && anchor.href.substr(0,7) === "http://")


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow