How to open a new window

In the Web's early years there was a frenzy of webmasters trying to get visitors to their websites and keep them there. Techniques included using frames to keep links outside the website from displaying the address in the browser's location editor. Other techniques included using target="_blank" within <a> tags to open the link in a new browser window, thus keeping the linker's site visible. The later technique will be the subject of this webpage.

The Problem

Usually there is no reason to open an external link in a new window. But there are some handy cases when a simple info window can add a lot to a website. But there are several caveats that one must be aware of before blindly adding popup windows.

Relying on JavaScript alone can fail in cases where the browser does not support JavaScript or when the user has turned off JavaScript. Obviously this isn't a wise choice when trying to target to as many users as possible.

Using target="_blank" is valid in instances when the DTD supports it (Non-XHTML, except for Transitional) but breaks the browser's back button; it is important (especially in cases of accessibility) to leave the user's web browser functioning as the user would expect. I.e., pressing the back button to return to the previous page. Further objections to this method (and popups in general) include an argument which states that it is not the webmaster's place to dictate how the user's web browser functions. That is, the webmaster shouldn't be controlling the browser - only the content on the webpage. Indeed, that, in my opinion, is the main objection to gratuitous use of popups. As the web moves into versions of XHTML which obsoletes the target="_blank" this becomes less and less an option.

The Solution

The solution I use is javascript based but can gracefully fall back and open the wouldbe-popup in the current window. A sample code is below...

<a href="/~lisa/site/info/site/popups.php"
onclick="window.open('
 /~lisa/site/info/site/popups.php',
 'How to open a new window properly.');return false;">
How to use popups</a>

Sample code. Click here to see it in action. Try with and without JavaScript.

There are some concerns with using this code. For instance Internet Explorer will not pass the referrer on to the server when the popup is used whereas every other browser will.

The key to this solution is the return false; portion, which prevents the browser from proceeding to respond to the click (on the anchor) event, only executing the onclick event.

It is interesting to note that Internet Explorer also fails on this simple JavaScript (likely because I have omitted parameters in window.open). However IE still goes to the link, which proves my gracefully degrading argument.