JavaScript Window Object
The JavaScript window object sits at the top of the JavaScript Object hierarchy and represents the browser window (or windows if you have more than one browser window open at any one time). Up until this chapter we have focused on the internals and syntax of JavaScript. In this chapter we will begin to make things happen on the screen (which, after all, is one of the main purposes of JavaScript). The window object allows developers to perform tasks such as opening and closing browser windows, displaying alert and prompt dialogs and set up timeouts (specifying an action to take place after a specified period of time).
Referencing the JavaScript window Object
As covered in JavaScript Object Basics it is usually necessary to use dot-notation when accessing properties or methods of an object. For example the following script fragment accesses the write() method of the document object:
document.write("Hello");
The window object is the top-level object of the object hierarchy. As such, whenever an object method or property is referenced in a script without the object name and dot prefix it is assumed by JavaScript to be a member of the window object. This means, for example, that when calling the window alert() method to display an alert dialog the window. prefix is not mandatory. Therefore the following method calls achieve the same thing:
window.alert(); alert()
JavaScript window Object Properties
The JavaScript window object contains a number of properties that can be inspected and used in a script:
- window.closed - Used when handling multiple windows, this property indicates whether a window has been closed or not.
- window.defaultstatus / window.status - defaultstatus specifies the default message displayed in the browser status bar. status specifies a temporary message to display in the browser status bar in place of the default. Disabled in many browsers.
- window.frames[] - If the window contains frames this array holds the arrary of frame objects (see JavaScript Arrays details on accessing arrays).
- window.name - Windows opened by a script must be given a name. This property contains the name of the corresponding window object.
- window.opener - When a window has been opened in a script contained in another window, this property of the child window contains a reference window which opened it.
- window.parent - When working with frames in a window this property contains a reference to the window object that contains the frame.
- window.screen - An object which contains information about the screen on which the window is displays (properties contained in this object include height, width, availHeight, availWidth and colorDepth).
- window.self - A reference to the current window.
- window.top - A reference to the top-level window when working with frames.
Opening Browser Windows using JavaScript
A new browser window can be opened from a JavaScript script using the open() method of the window object. The syntax for opening a new window is as follows:
newWindowObj = window.open("URL", "WindowName", "feature, feature, feature ... ");
The following provides an explanation of the arguments passed through to the open() method:
- URL - Specifies the URL of the web page to be loaded into the new window. If no URL is specified a blank window is loaded.
- WindowName - Specifies the window name and is used to refer to the window.
- features - A comma separated list of features that allow you to customize the appearance of the window. Options are:
| Setting | Explanation |
|---|---|
| width | Specifies the intial width of the browser client window (see innerWidth for size of content area) |
| height | Specifies the intial height of the browser client window (see innerHeight for size of content area) |
| innerWidth | Specifies the intial width of the window content area |
| innerHeight | Specifies the intial height of the window content area |
| outerWidth | Specifies the intial width of the navigator window |
| outerHeight | Specifies the intial height of the navigator window |
| toolbar | Specifies whether the window should contain the browser toolbar or not |
| status | Specifies whether the window should contain the browser status bar or not |
| dependent | Specifies whether the window should close in unison with its parent window |
| menubar | Specifies whether the window should contain the browser menubar |
| location | Specifies whether the window should contain the browser location/URL box |
| scrollbars | Hides/Shows browser horizontal/vertical scrollbars |
| resizable | Specifies whether the user is entitled to resize the window after it appears. |
| directories | Specifies whether the window should contain the browser personal toolbar. |
| copyHistory | Specifies whether the new window should contain a copy of the URL history of the invoking window |
| left | Specified the number of pixels from the left side of the screen to the new window |
| top | Specified the number of pixels from the top of the screen to the new window |
| alwaysLowered | Creates a new window that is always positioned beneath the other browser windows. Often used for those annoying pop-under advertisements. |
| alwaysRaised | Creates a new window that is always positioned over the top of the other browser windows on the screen. |
| z-lock | Locks the level at which the browser appears in relation to other browser windows. |
The height, width and postion feature are set using numbers. The remaining feature options can be set using true or false values (also yes, no and 1 and 0 can be used in place of true and false). An absent attribute is considered to be false. The following example creates a new window with a menubar, specific dimension and no toolbar:
newWindowObj = window.open("URL", "WindowName", "toolbar=0, menubar=1, innerHeight=200, innerWidth=300");
Closing Browser Windows using JavaScript
A window can be closed using the window object's close() method. The name of the window (specified in the open() method should be referenced when performing a close so that you are certain to close the correct window. For example the following code creates a new window and creates a pushbutton which, when clicked, closes the new window:
<script language="JavaScript" type="text/javascript">
newWindowObj = window.open ("", "MyWindow");
</script>
<form action="null">
<input type="button" value="Close Window" onclick="newWindowObj.close()" />