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("https://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("https://www.docjs.com/", "docjs", "location,menubar,resizable");
win = window.open("https://www.docjs.com/", "docjs", "location=yes,menubar=yes,resizable=yes");
win = window.open("https://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");
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");
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");
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");
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");
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");
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");
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");
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");
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");
left
Internet Explorer | Version 4+ |
Navigator | Not Supported |
Specifies the X-coordinate, in pixels, of the window.
window.open("left.html", "_blank", "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");
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");
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");
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");
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");
screenX
Internet Explorer | Not Supported |
Navigator | Version 4+ |
Specifies the X-coordinate, in pixels, of the window.
window.open("screenx.html", "_blank", "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");
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");
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");
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");
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");
top
Internet Explorer | Version 4+ |
Navigator | Not Supported |
Specifies the Y-coordinate, in pixels, of the window.
window.open("top.html", "_blank", "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");
z-lock
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
Produced by Yehuda Shiran and Tomer Shiran
Created: April 10, 2000
Revised: April 10, 2000
URL: https://www.webreference.com/js/tutorial1/features.html