Window Features

The basic structure of the window.open() method is:

window.open(sURL, sName);

However, you can customize your new windows by using two additional arguments:

window.open(sURL, sName[, sFeatures][, bReplace]);

You can use the default features by omitting these arguments. Let's start with with the bReplace parameter, which is only supported by Internet Explorer 4 and later. This parameter is useful only when the second argument names an already existing window. It is a Boolean value that specifies whether the URL specified as the first argument should replace the current entry in the window's browsing history (true) or create a new entry in the window's browsing history (false), which is the default behavior. Since bReplace is only supported by Microsoft's browser, it isn't very useful. So let's take a look at JavaScript's well-known set of window attributes.

The third argument of the open() method is a string (as you tell by the s in sFeatures) containing a comma-separated list of options for the new window (do not include any spaces in this list). Before we dive into the sea of available features, let's see how they are implemented. Here's an example:

win = window.open("http://www.docjs.com/", "docjs", "location=1,menubar=1,resizable=1");

This statement opens a resizable window with a Location field and a menu bar. All other features are turned off. For example, the new window doesn't feature a status bar, because we didn't specify the status feature. Note that there are several other ways to specify a window feature. Here are a few statements that are equivalent to the previous one:

win = window.open("http://www.docjs.com/", "docjs", "location,menubar,resizable");
win = window.open("http://www.docjs.com/", "docjs", "location=yes,menubar=yes,resizable=yes");
win = window.open("http://www.docjs.com/", "docjs", "location,menubar=1,resizable=yes");

feature[=value]

There is a big difference between assigning the sFeatures parameter an empty string and omitting this parameter altogether. If you don't hand the open() method a string, all features are set to their default values. In other words, the browser creates a window that has a default width and height and the standard menu, toolbar, and other features of the browser. If you use an empty string as the list of desired features, the browser opens a window with all features turned off (except titlebar and hotkeys).

As mentioned in the previous section of this tutorial, the second argument of the window.open() method specifies the name of the window (sName). If it refers to an existing window, the browser loads the specified URL (sURL) into the existing window with that name. Therefore, if sName specifies an existing window, the browser ignores the list of window features.

Not all window features are supported by all browsers. If the browser doesn't recognize a specific feature, it simply ignores it. Let's take a look at JavaScript's various window features:

• alwaysLowered
• alwaysRaised
• channelmode
• dependent
• directories
• fullscreen
• height
• hotkeys
• innerHeight
• innerWidth
• left
• location
• menubar
• outerWidth
• outerHeight
• menubar
• resizable
• screenX
• screenY
• scrollbars
• status
• titlebar
• toolbar
• top
• width
• z-lock

Internet Explorer	Not Supported
Navigator	Version 4+

Specifies that the window should always remain at the bottom of the stack. In other words, the new window should float below other windows, whether it is active or not. This feature requires a signed script.

window.open("alwayslowered.html", "_blank", "alwaysLowered");

Internet Explorer	Not Supported
Navigator	Version 4+

Specifies that the window should always remain at the top of the stack. In other words, the new window should float above other windows, whether it is active or not. This feature requires a signed script.

window.open("alwaysraised.html", "_blank", "alwaysRaised");

Internet Explorer	Version 4+
Navigator	Not Supported

Specifies whether to display the window in theater mode and show the channel band.

window.open("channelmode.html", "_blank", "channelmode");

Internet Explorer	Not Supported
Navigator	Version 4+

Specifies whether the window should be a dependent child of the current (opener) window. A dependent window closes when its parent window closes. On Windows platforms, a dependent window does not show on the task bar.

window.open("dependent.html", "_blank", "dependent");

Internet Explorer	All Versions
Navigator	All Versions

Specifies whether to display directory buttons (best known as the "What's Cool" and "What's New" buttons). Internet Explorer refers to the directory buttons as the Links Toolbar, while Navigator (4 and above) calls them the Personal Toolbar.

window.open("directories.html", "_blank", "directories");

Internet Explorer	Version 4+
Navigator	Not Supported

Specifies whether to display the browser in a full-screen window. Use full-screen mode carefully. Because this mode hides the browser's title bar and menus, you should always provide a button or other visual clue to help the user close the window. ALT+F4 also closes the new window.

window.open("fullscreen.html", "_blank", "fullscreen");

Internet Explorer	All Versions
Navigator	All Versions

Specifies the height, in pixels, of the window's document display area. The minimum value is 100 (Navigator allows lower values in signed scripts). If only the height is specified, Internet Explorer uses the given height and the default width. Navigator simply ignores this property if you don't specify width or innerWidth as well.

window.open("height.html", "_blank", "height=200,width=300");

Internet Explorer	Not Supported
Navigator	Version 4+

If no (or 0), disables most hotkeys (keyboard shortcuts) in a new window that has no menu bar. The security and quit hotkeys remain enabled. This feature requires a signed script.

window.open("hotkeys.html", "_blank", "hotkeys=0,menubar=0");

Internet Explorer	Not Supported
Navigator	Version 4+

Specifies the height, in pixels, of the window's document display area. The minimum value is 100 (Navigator allows lower values in signed scripts). This feature replaces height in Navigator 4, which remains for backwards compatibility. Navigator simply ignores this property if you don't specify innerWidth or width as well.

window.open("innerheight.html", "_blank", "innerHeight=200,innerWidth=300");

Internet Explorer	Not Supported
Navigator	Version 4+

Specifies the width, in pixels, of the window's document display area. The minimum value is 100 (Navigator allows lower values in signed scripts). This feature replaces width in Navigator 4, which remains for backwards compatibility. Navigator simply ignores this property if you don't specify innerHeight or height as well.

window.open("innerwidth.html", "_blank", "innerHeight=200,innerWidth=300");

Internet Explorer	Version 4+
Navigator	Not Supported

Specifies the X-coordinate, in pixels, of the window.

window.open("left.html", "_blank", "left=20");

Internet Explorer	All Versions
Navigator	All Versions

Specifies whether to display the input field for entering URLs directly into the browser.

window.open("location.html", "_blank", "location");

Internet Explorer	All Versions
Navigator	All Versions

Specifies whether to display the menu bar (the menu at the top of the window, including File and Edit).

window.open("menubar.html", "_blank", "menubar");

Internet Explorer	Not Supported
Navigator	Version 4+

Specifies the total height, in pixels, of the window (its outside boundary). The minimum value is a little more than 100, because the height of the window's content area must be at least 100 (Navigator allows lower values in signed scripts). Navigator simply ignores this property if you don't specify outerWidth as well.

window.open("outerheight.html", "_blank", "outerHeight=200,outerWidth=300");

Internet Explorer	Not Supported
Navigator	Version 4+

Specifies the total width, in pixels, of the window (its outside boundary). The minimum value is a little more than 100, because the width of the window's content area must be at least 100 (Navigator allows lower values in signed scripts). Navigator simply ignores this property if you don't specify outerHeight as well.

window.open("outerwidth.html", "_blank", "outerHeight=200,outerWidth=300");

Internet Explorer	All Versions
Navigator	All Versions

Specifies whether the window should have resize handles around its border. Depending on the platform, the user may still have ways to resize the window.

window.open("resizable.html", "_blank", "resizable");

Internet Explorer	Not Supported
Navigator	Version 4+

Specifies the X-coordinate, in pixels, of the window.

window.open("screenx.html", "_blank", "screenX=20");

Internet Explorer	Not Supported
Navigator	Version 4+

Specifies the Y-coordinate, in pixels, of the window.

window.open("screeny.html", "_blank", "screenY=20");

Internet Explorer	All Versions
Navigator	All Versions

Specifies whether to enable horizontal and vertical scrollbars when they are necessary.

window.open("scrollbars.html", "_blank", "scrollbars");

Internet Explorer	All Versions
Navigator	All Versions

Specifies whether to add a status bar at the bottom of the window.

window.open("status.html", "_blank", "status");

Internet Explorer	Version 5+
Navigator	Version 4+

Specifies whether to display a title bar for the window. In Internet Explorer, this feature is ignored unless the caller is an HTML Application or a trusted dialog box. In Navigator, setting this feature to no (or 0) requires a signed script.

window.open("titlebar.html", "_blank", "titlebar=0");

Internet Explorer	All Versions
Navigator	All Versions

Specifies whether to display the browser toolbar (the toolbar at the top of the window, including Back and Forward).

window.open("toolbar.html", "_blank", "toolbar");

Internet Explorer	Version 4+
Navigator	Not Supported

Specifies the Y-coordinate, in pixels, of the window.

window.open("top.html", "_blank", "top=20");

Internet Explorer	All Versions
Navigator	All Versions

Specifies the width, in pixels, of the window's document display area. The minimum value is 100 (Navigator allows lower values in signed scripts). If only the width is specified, Internet Explorer uses the given width and the default height. Navigator simply ignores this property if you don't specify height or innerHeight as well.

window.open("width.html", "_blank", "height=200,width=300");

Internet Explorer	Not Supported
Navigator	Version 4+

Specifies that the window should not be raised in the stacking order when activated. In other words, the new window should does not rise above other windows when activated. This feature requires a signed script.

window.open("zlock.html", "_blank", "z-lock");

Next: How to utilize the window features