New windows with JavaScript and the target attribute

I’ve written a few articles about techniques that use JavaScript to open new browser windows, the most recent one being Opening new windows with JavaScript, version 1.2. A very quick summary of my reason for using JavaScript is that it enables me to use strict HTML 4.01 and XHTML doctypes, which do not allow the target attribute.

By using JavaScript to open new windows I can still use validation as a quality assurance tool when working with HTML 4.01 or XHTML 1.0 without having to manually filter out the errors caused by target attributes or downgrading to a Transitional doctype. (I’m aware that the target attribute is allowed in HTML5, so eventually this will all be completely unnecessary.)

Let it be known that I am by no means a proponent of opening new windows, quite the contrary. As a user I find new windows a nuisance, and since there are several well-known accessibility and usability problems related to opening new windows I always recommend leaving end users in control.

However, some people insist on having certain links (often those leading to an external site) open in new windows. As a workaround I turned to JavaScript, which I feel is an acceptable compromise. Users who do not have JavaScript enabled will still be free to open new windows if they really want to, and there are no target attributes in the markup to interfere with quality assurance.

But there is a problem.

While the techniques I described in my previous articles on this do work, the way those techniques use JavaScript’s window.open() function is in fact not particularly unobtrusive, and not the best solution.

Many people, myself included, prefer to suppress the opening of new windows in our web browsers, either by completely preventing it or by routing new windows to new tabs, which is what Firefox does by default. And some browsers, like Safari, use the status bar to alert the user that the link they are about to follow will open in a new window. But those very useful features only work reliably with links that have a target attribute, which means my previous techniques may break that functionality. Bad.

So because of that, I have rewritten the script to make it less obtrusive. If you’ve used one of the techniques I described previously, please replace it with the revised script.

To use other values than the default ones, call the script with a configuration object literal, like this:

  1. JSTarget.init({
  2. strAtt: 'rel',
  3. strVal: 'external',
  4. strWarning: ' (external link, opens in a new window)'
  5. });

The settings are pretty self-explanatory, but here is a detailed description of each of them:

  • strAtt specifies which attribute you want to use to determine whether a link should open in a new window
  • strVal contains the value the attribute should have to trigger a new window
  • strWarning holds the text you want appended to each link that will open in a new window. If you really, really (and I recommend against this, but since the question will come up anyway…) cannot stand informing all users that a particular link will open in a new window, set this to null.

See the New windows with JavaScript and the target attribute demo page for an example of the script.

Use your favourite addEvent() or DOMReady() function to make the script run when the document is loaded/ready. And yes, if you’re already using jQuery or some other JavaScript library you can obviously rewrite this function using much less code. Here is how you could do it with jQuery:

  1. $(document).ready(function () {
  2. $("a.new-window").append(' <em>(new window)</em>').attr('target', '_blank');
  3. });

I guess that was a really long-winded way of saying that in most cases it’s better for your users if you use JavaScript to set the target attribute instead of using window.open().

Posted on June 8, 2010 in Accessibility, JavaScript, Usability

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.