Difference between revisions of "JavaScript Window Object"

Revision as of 18:31, 10 May 2007

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:

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()" />

It is also possible to close the window that opened the current window using opener:

window.opener.close()

will close the window that opened the window in which the above script is run.

Moving and Resizing Windows

A window can be moved to specific coordinates on the screen using the window object's moveTo() method which takes x and y coordinates as arguments. The following example move a new window to location 100, 200 on the screen when the "Move Window" button is pressed:

<script language="JavaScript" type="text/javascript">
newWindowObj = window.open ("", "MyWindow");

</script>

<form action="null">
  <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" />
</form>

In addition to moving a window to a specific new location is is also possible to move a window relative to its current location on the screen using the moveBy() method of the JavaScript window object. Once again the method takes x and y values that are added to the current x and y coordinates of the specified window. Negative values can be used to change the direction of the movement:

<script language="JavaScript" type="text/javascript">
newWindowObj = window.open ("", "MyWindow");

</script>

<form action="null">
  <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" />
</form>

The window resizeTo() and resizeBy() methods work similarly in that they allow you to change the size of a window either to a specific size, or to a new size relative to the current size.

Displaying Message Box Dialogs

The JavaScript window object provides methods to display three types of message dialogs, the alert, confirmation and prompt dialogs:

• alert - intended to display a message to the user. It contains a message area where the alert message is to be displayed and an "OK" button that the user can click to dismiss the dialog. The alert() method takes a single argument representing the message to be displayed in the dialog. The following web page fragment displays an alert dialog with the message "You do not have a valid password" when the "Show Alert" button is clicked:

<form action="null">
  <input type="button" value="Show Alert" onclick="window.alert('You do not have a valid password')" />
</form>

• confirmation - used when a yes or no response needs to be obtained from the user. This dialog type displays with a message and "OK" and "Cancel" buttons. The confirm() method takes the message to be displayed to the user as an argument and retruns true or false depending on whether the user pressed "OK" or "Cancel":

<script language="JavaScript" type="text/javascript">

function showConfirmation()
{
        var result = confirm("Would you like to continue?");

        if (result)
                document.write("Continue");
        else
                document.write("Do not continue");
}
</script>

<form action="null">
   <input type="button" value="Show Confirmation" onclick="showConfirmation()" />
</form>

• prompt - designed to enable information to be obtained from the user. The dialog conists of a message to the user, a text input field for the entry of data and OK and Cancel buttons. The prompt() method takes the message to be displayed as an argument and retruns the value entered by the user:

<script language="JavaScript" type="text/javascript">

function showPrompt()
{
        var userInput = prompt("Please enter your name:");

        document.write("Hello, " + userInput);
}
</script>

<form action="null">
   <input type="button" value="Show Prompt" onclick="showPrompt()" />
</form>