The One True Way to Open a Window in JavaScript

After many years of doing this, I seem to have settled on this pattern for the last few years. If everyone used this, our web browsing lives would be so much easier, productive and fun.

Code is slightly updated from the original post to reflect the comments below.

<a href="your_link" onclick="return !window.open(this.href,'window_name','options');"></a>

Try It

Why is this so awesome? If the browser doesn't have JavaScript enabled, it still works. For anyone who just clicks and does have JavaScript enabled, you get control of how the window opens, but most importantly, anyone who WANTS control of how the window is opened still gets it. Even if you want your window to be opened with no toolbars, and be exactly 400 pixels tall, I may really want it in another tab. And at the end of the day it's my screen. Give me the dignity to choose.

Note this still works just fine when defined entirely in JavaScript, but you can't attach it with addEventListener / attachEvent / observe. It has to be like this:

link.onclick = function(){
    return !window.open(this.href,'name','options');
};

If you don't do it this way, you'll open a window with the link, and the parent window will still follow the link too.

In the comments below there is an example with Prototype's observe method.

Posted May 14th, 2007 at 7:04 pm by Ryan in Programming

Replies to this Post

This is not exactly the best way to handle opening new windows by JS. If you hard-code "return false" into onclick, you risk non-working link.

Opening new window can be canceled by popup-blocker, or for any other reason. In that case, new window is not opened, onclick returns false, link does not work. There's very simple solution for this:

return !window.open(this.href);

If window is not opened for any reason, onclick returns "true" and the link works just like any other link.

Posted May 15th, 2007 at 2:53am by fczbkk

And by the way, it is possible to attach this functionalit via event listeners. You just have to use event.preventDefault in the attached function.

Every library handling events has some method for this. For example, in Prototype it is Event.stop(event).

Posted May 15th, 2007 at 2:59am by fczbkk

fczbkk, thanks for your replies. The title of this post was a bit of a joke, but those are both totally valid points. I stand corrected, and here is some updated code.

<a href="your_link" onclick="return !window.open(this.href,'window_name','options');"></a>

in javascript the traditional way:

link.onclick = function(){
    return !window.open(this.href,'name','options');
};

with event handlers in prototype:

$(link).observe('click',function(event){
    window.open(this.href,'name','options');
    Event.stop(event);
});

Posted May 15th, 2007 at 10:52am by ryan

On another slightly related note, if you ever get strange, sometimes untraceable errors from IE (thanks guys) when opening a window, it's usually because you can't have a wide variety of characters in the window name parameter, including spaces.

Posted May 15th, 2007 at 10:54am by ryan 

Event.stop(event)
is actually built in to javascript just under a different alias, instead you would do 
e.preventDefault();

You can see it more about it here: http://www.dustindiaz.com/event-capturing-evil/

Posted May 15th, 2007 at 2:22pm by SamKellett

The prototype implementation is cross browser though, that is only the W3C model. This is the code for Event.stop:

  stop: function(event) {
    if (event.preventDefault) {
      event.preventDefault();
      event.stopPropagation();
    } else {
      event.returnValue = false;
      event.cancelBubble = true;
    }
  },

Posted May 15th, 2007 at 2:45pm by ryan

Posted July 24th, 2007 at 1:45pm by

Posted July 24th, 2007 at 1:51pm by

Posted July 24th, 2007 at 2:02pm by

Login or Register to Post