A standards-compliant alternative to target=”_blank”

1. The context

At least once in every web developer’s life, the target attribute of an anchor link (<a>) was used with the “_blank” value to tell the browser “open this link into a new window”. The problem is that this attribute is deprecated and thus doesn’t pass the W3C Validation.

Although it’s considered a usability error to force that behaviour (the user should be the only one take that decision) and usability experts such as Jakob Nielsen totally agree with this, it’s sometimes a need to control this. It can be within the context of a web application to satisfy a customer request for example and I think a lot of people needed to use this once for a good reason.

2. The alternatives

• Add a “external” css class to the anchors links in the server-side code, and in javascript open those ones in a new window
• In javascript, find links having a URL starting with “http://” and open them in a new window
• …

The first solution isn’t ideal according to me :

1. You don’t always have access to the server-side code
2. If the website uses a CMS, you don’t wanna force your users to add these classes by themselves
3. It generates a heavier markup (with useless “class” attributes)
4. It requires a manual intervention to add these classes and is thus error-prone

The second solution is better but yet imperfect :

1. It’s better because it’s an automatic process
2. It works quite well as internal links are relative paths (ex: “products.aspx”) so URLs starting with “http://” will open in a new window
3. Sometimes you have absolute paths who are not real external links. It’s sometimes the case for websites with a CMS. Example : you have a website, “http://mysite.com”, you don’t want a URL “http://mysite.com/products.aspx” to open in a new window, even if it’s starting with “http://”.

3. The solution : target_blank.js

With all of this in mind, I created a target_blank.js file that does the job, using the great jQuery library :

1. When the DOM is loaded (document ready)
2. Find all the links having a hostname (thus not links such as “mailto:” etc) and having a hostname different from the one of your website (without the “www.” as you want to consider “http://mysite.com” and “http://www.mysite.com” as the same domain)
3. When clicked, open that link into a new window (passing the href value as argument) and return false to cancel the standard behaviour (which would have been to change the URL within the current window)

4. Conclusion

We’ve seen here a standards-compliant alternative to target=”_blank” using non-obtrusive Javascript (it degrades well as a browser with javascript disabled simply won’t offer that functionality without crashing the whole thing) and that requires no manual intervention from the developer or the user (case of a CMS). Just keep in mind that it’s not a good usability practice and thus this technique should be used for a good reason (eg : within the context of a web application for a particular need).

Make good use of it

Book review : DOM Scripting

This excellent book, which primarily targets a web designer audience, teaches you how to manipulate the DOM effectively but also other essential topics used in web development. Prior to reading this book, I already had a good knowledge of the DOM, so the technical aspect wasn’t what I learned the most from this book. And it’s also because the book won’t dig deep into technical aspects as the targetted audience is web designers (and not necessarily developers). An interesting consequence of this is that the author did an outstanding teaching work to make it easily understandable. But what you’ll learn is, according to me, way more useful than pure technical stuff : mastering concepts such as usable javascript, unobtrusive javascript and graceful degradation.

Pros

• Very well written and explained : technical concepts are vulgarised and examples are very relevant (mini websites using all the concepts that were teached).
• Excellent course about the DOM and web development practices using Javascript.

Cons

• As the book was written primarily for web designers, it might leave some developers thirsty for more. But anyway, the more important stuff is in the book so that makes the deal. Just keep in mind that you won’t go in deep technical details in this book.

Conclusion

Another instant-classic book that will not only teach you the DOM very well, but also essential concepts such as usable javascript, unobtrusive javascript and graceful degradation. If you’re working in the web and those concepts are not familiar to you, this book is a must-have on your bookshelf ! But if you already have an advanced knowledge of these things, you might prefer to pick up another, more advanced book.