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
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

alwaysLowered

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");

alwaysLowered

alwaysRaised

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");

alwaysRaised

channelmode

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");

channelmode

dependent

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");

dependent

directories

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");

directories

fullscreen

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");

fullscreen

height

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");

height=200,width=300

hotkeys

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");

hotkeys=0,menubar=0

innerHeight

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");

innerHeight=200,innerWidth=300

innerWidth

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");

innerHeight=200,innerWidth=300

left

Internet Explorer	Version 4+
Navigator	Not Supported

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

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

left=20

location

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");

location

menubar

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");

menubar

outerHeight

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");

outerHeight=200,outerWidth=300

outerWidth

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");

outerHeight=200,outerWidth=300

resizable

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");

resizable

screenX

Internet Explorer	Not Supported
Navigator	Version 4+

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

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

screenX=20

screenY

Internet Explorer	Not Supported
Navigator	Version 4+

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

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

screenY=20

scrollbars

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");

scrollbars

status

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");

status

titlebar

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");

titlebar=0

toolbar

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");

toolbar

top

Internet Explorer	Version 4+
Navigator	Not Supported

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

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

top=20

width

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");