WWW FAQs: How do I open a new window of a certain size?

2004-10-30: JavaScript can open a browser window of any size, with or without a toolbar, button bar, scrollbars, and so on.

However, since all major web browsers now offer popup advertising filters, you must be very careful to do this only in response to a specific user action. Otherwise, the web browser will probably ignore your code or, at best, display a small "popup requested" icon that the user will probably not pay attention to.

Also, be aware that users still sometimes disable JavaScript entirely, and that companies sometimes do so throughout the entire organization as a matter of corporate policy. It is essential to have a good "fallback" link that operates if the user's browser does not execute your JavaScript.

Warning: When you test this example with files on your own hard drive, Internet Explorer for Windows will always display warning messages. However, this does not happen when you put the same pages on a real website. Which you are going to do anyway. Right? So, relax! If you really want to see this work at home without any warning messages, set up a testing web server on your own computer.

Fortunately it is not difficult to address all of these issues correctly. Here is a complete example that is compatible with pop-up advertising blockers and behaves well with or without JavaScript in both Internet Explorer and Mozilla/Netscape.

This method produces a window of a size close to what you had in mind in all major browsers. But you can get it even closer! Want the width and height to match your layout exactly? You can do it... with a little effort. Check out the article how do I make the window size exactly match my layout?

<!-- In the head section of the page -->
function wopen(url, name, w, h)
// Fudge factors for window decoration space.
 // In my tests these work well on all platforms & browsers.
w += 32;
h += 96;
 var win = window.open(url,
  'width=' + w + ', height=' + h + ', ' +
  'location=no, menubar=no, ' +
  'status=no, toolbar=no, scrollbars=no, resizable=no');
 win.resizeTo(w, h);
// -->

When it comes time to actually open such a window, just write a link like the following:

<a href="page.html" target="popup"
 onClick="wopen('page.html', 'popup', 640, 480); return false;"> Click here to open the page in a new window. </a>

In this example, the window opens with sufficient interior space to accommodate a layout 640 pixels wide and 480 pixels tall. You can easily change the size by changing the width and height parameters to wopen, above. The page that opens is page.html which, of course, you can also change, but be careful to change both the href attribute and the first argument to wopen.

But what does popup mean? This is the name of the new window. If we use the same name for all target attributes and in all calls to wopen, and we have already popped up a new window once, then that same window will be reused on future clicks instead of opening up a new one. This way, you can group together links that should affect the same popup window by using the same window name for them. If you prefer to open a new window every time, use _blank.

When a window is reused by a new click with the same window name, the win.focus() call takes care of making sure the window still comes to the foreground, something that is frequently forgotten in similar scripts.

If JavaScript is disabled in the user's browser, the window still opens, although the size cannot be set.

If you are using XHTML 1.1 Strict, be aware that the target attribute is no longer accepted. If you must be XHTML 1.1 Strict compliant, you should remove the target attribute. A new window will still be opened when JavaScript is available; otherwise the link will be followed normally in the same window, and your design should cope gracefully with this possibility.

For a complete list of the options that can be passed to window.open to control the behavior of the new window, see this article on javascript.about.com. The reference table on that page is excellent, although I do not recommend following their suggestions regarding timed popup advertising, as most browsers will ignore it and the remaining users will be irritated more than the advertising is worth. Control over new windows is best used to achieve design goals that improve the user's experience of your site.

See also how do I center a new browser window on the screen? and How do I make the window size match my layout?

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!