spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / tutorial1


Working with Windows

Developer News
MicrosoftÂ’s Automated Agent: Can We Talk?
Borland Finally Sells CodeGear
Red Hat Heads For The JON 2.0

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


JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
Microsoft Article: HyperV-The Killer Feature in WinServer ‘08
Avaya Article: How to Feed Data into the Avaya Event Processor
Microsoft Article: Install What You Need with Win Server ‘08
HP eBook: Putting the Green into IT
Whitepaper: HP Integrated Citrix XenServer for HP ProLiant Servers
Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 1
Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 2--The Future of Concurrency
Avaya Article: Setting Up a SIP A/S Development Environment
IBM Article: How Cool Is Your Data Center?
Microsoft Article: Managing Virtual Machines with Microsoft System Center
HP eBook: Storage Networking , Part 1
Microsoft Article: Solving Data Center Complexity with Microsoft System Center Configuration Manager 2007
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Intel Video: Are Multi-core Processors Here to Stay?
On-Demand Webcast: Five Virtualization Trends to Watch
HP Video: Page Cost Calculator
Intel Video: APIs for Parallel Programming
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
Microsoft Silverlight Video: Creating Fading Controls with Expression Design and Expression Blend 2
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Sun Download: Solaris 8 Migration Assistant
Sybase Download: SQL Anywhere Developer Edition
Red Gate Download: SQL Backup Pro and free DBA Best Practices eBook
Red Gate Download: SQL Compare Pro 6
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
How-to-Article: Preparing for Hyper-Threading Technology and Dual Core Technology
eTouch PDF: Conquering the Tyranny of E-Mail and Word Processors
IBM Article: Collaborating in the High-Performance Workplace
HP Demo: StorageWorks EVA4400
Intel Featured Algorhythm: Intel Threading Building Blocks--The Pipeline Class
Microsoft How-to Article: Get Going with Silverlight and Windows Live
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Perl Pragma Primer · Implement Drag and Drop in Your Web Apps: Part 2 · How to Create an Ajax Autocomplete Text Field: Part 5
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
SQL Server 2005 Express Edition - Part 22 - Upgrading from Microsoft SQL Server Desktop Engine (MSDE) · Vyatta: Downgrades that Pay Off · NetMotion Brings Cross-Network Support to Wireless VoIP


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

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