Working with Windows: Window Features | WebReference

Working with Windows: Window Features


Working with Windows

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");
Many of the features can either be yes or no. For these features, you can use 1 instead of yes and 0 instead of no. If you want to turn a feature on, you can also simply list the feature name in the sFeatures string. If you don't list a specific feature, it is turned off (except titlebar and hotkeys). The sFeatures argument is a comma-separated list of features. It should not contain any spaces or other whitespace. Each element in the list should have the format:

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

Internet ExplorerNot Supported
NavigatorVersion 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");
alwaysLowered

alwaysRaised

Internet ExplorerNot Supported
NavigatorVersion 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");
alwaysRaised

channelmode

Internet ExplorerVersion 4+
NavigatorNot Supported

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

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

dependent

Internet ExplorerNot Supported
NavigatorVersion 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");
dependent

directories

Internet ExplorerAll Versions
NavigatorAll 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");
directories

fullscreen

Internet ExplorerVersion 4+
NavigatorNot 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");
fullscreen

height

Internet ExplorerAll Versions
NavigatorAll 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");
height=200,width=300

hotkeys

Internet ExplorerNot Supported
NavigatorVersion 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");
hotkeys=0,menubar=0

innerHeight

Internet ExplorerNot Supported
NavigatorVersion 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");
innerHeight=200,innerWidth=300

innerWidth

Internet ExplorerNot Supported
NavigatorVersion 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");
innerHeight=200,innerWidth=300

left

Internet ExplorerVersion 4+
NavigatorNot Supported

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

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

location

Internet ExplorerAll Versions
NavigatorAll Versions

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

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

menubar

Internet ExplorerAll Versions
NavigatorAll 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");
menubar

outerHeight

Internet ExplorerNot Supported
NavigatorVersion 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");
outerHeight=200,outerWidth=300

outerWidth

Internet ExplorerNot Supported
NavigatorVersion 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");
outerHeight=200,outerWidth=300

resizable

Internet ExplorerAll Versions
NavigatorAll 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");
resizable

screenX

Internet ExplorerNot Supported
NavigatorVersion 4+

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

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

screenY

Internet ExplorerNot Supported
NavigatorVersion 4+

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

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

scrollbars

Internet ExplorerAll Versions
NavigatorAll Versions

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

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

status

Internet ExplorerAll Versions
NavigatorAll Versions

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

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

titlebar

Internet ExplorerVersion 5+
NavigatorVersion 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");
titlebar=0

toolbar

Internet ExplorerAll Versions
NavigatorAll 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");
toolbar

top

Internet ExplorerVersion 4+
NavigatorNot Supported

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

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

width

Internet ExplorerAll Versions
NavigatorAll 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");
height=200,width=300

z-lock

Internet ExplorerNot Supported
NavigatorVersion 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");
z-lock

Next: How to utilize the window features

Produced by Yehuda Shiran and Tomer Shiran

Created: April 10, 2000
Revised: April 10, 2000

URL: http://www.webreference.com/js/tutorial1/features.html