Sams Teach Yourself JavaScript in 24 Hours

Controlling Windows with Objects

In Hour 4, "Working with the Document Object Model (DOM)," you learned that you can use DOM objects to represent various parts of the browser window and the current HTML document. You also learned that the history, document, and location objects are all children of the window object.

In this hour, you'll take a closer look at the window object itself. As you've probably guessed by now, this means you'll be dealing with browser windows. A variation of the window object also enables you to work with frames, as you'll see later in this hour.

The window object always refers to the current window (the one containing the script). The self keyword is also a synonym for the current window. As you'll learn in the next sections, you can have more than one window on the screen at the same time, and can refer to them with different names.

Properties of the window Object

Although there is normally a single window object, there might be more than one if you are using pop-up windows or frames. As you learned in Hour 4, the document, history, and location objects are properties (or children) of the window object. In addition to these, each window object has the following properties:

• window.closed Indicates whether the window has been closed. This only makes sense when working with multiple windows because the current window contains the script and cannot be closed without ending the script.

• window.defaultstatus and window.status The default message for the status line, and a temporary message to display on the status line. Some recent browsers disable status line changes by default, so you might not be able to use these.

• window.frames[] An array of objects for frames, if the window contains them.

• window.name The name specified for a frame, or for a window opened by a script.

• window.opener In a window opened by a script, this is a reference to the window containing the script that opened it.

• window.parent For a frame, a reference to the parent window containing the frame.

• window.screen A child object that stores information about the screen the window is inits resolution, color depth, and so on.

• window.self A synonym for the current window object.

• window.top A reference to the top-level window when frames are in use.

Creating a New Window

One of the most convenient uses for the window object is to create a new window. You can do this to display a documentfor example, a pop-up advertisement or the instructions for a gamewithout clearing the current window. You can also create windows for specific purposes, such as navigation windows.

You can create a new browser window with the window.open() method. A typical statement to open a new window looks like this:

WinObj=window.open("URL", "WindowName", "Feature List");

The following are the components of the window.open() statement:

• The WinObj variable is used to store the new window object. You can access methods and properties of the new object by using this name.

• The first parameter of the window.open() method is a URL, which will be loaded into the new window. If it's left blank, no web page will be loaded. In this case, you could use JavaScript to fill the window with content.

• The second parameter specifies a window name (here, WindowName). This is assigned to the window object's name property and is used to refer to the window.

• The third parameter is a list of optional features, separated by commas. You can customize the new window by choosing whether to include the toolbar, status line, and other features. This enables you to create a variety of "floating" windows, which might look nothing like a typical browser window.

The features available in the third parameter of the window.open() method include width and height, to set the size of the window in pixels, and several features that can be set to either yes (1) or no (0): toolbar, location, directories, status, menubar, scrollbars, and resizable. You can list only the features you want to change from the default. This example creates a small window with no toolbar or status line:

SmallWin = window.open("","small","width=100,height=120,toolbar=0,status=0");

Opening and Closing Windows

Of course, you can close windows as well. The window.close() method closes a window. Browsers don't normally allow you to close the main browser window without the user's permission; this method's main purpose is for closing windows you have created. For example, this statement closes a window called updatewindow:

updatewindow.close();

As another example, Listing 10.1 shows an HTML document that enables you to open a small new window by pressing a button. You can then press another button to close the new window. The third button attempts to close the current window. Depending on your browser and its settings, this might or might not work. If it does close the window, most browsers will ask for confirmation first.

Listing 10.1. An HTML Document That Uses JavaScript to Enable You to Create and Close Windows

<html> <head><title>Create a New Window</title> </head> <body> <h1>Create a New Window</h1> <hr> <p>Use the buttons below to test opening and closing windows in JavaScript.</p> <hr> <form NAME="inform"> <input TYPE="button" VALUE="Open New Window" onClick="NewWin=window.open('','NewWin', 'toolbar=no,status=no,width=200,height=100'); "> <p><input TYPE="button" VALUE="Close New Window" onClick="NewWin.close();" ></p> <p><input TYPE="button" VALUE="Close Main Window" onClick="window.close();"></p> </form> <br><p>Have fun!</p> <hr> </body> </html>

This example uses simple event handlers to do its work, one for each of the buttons. Figure 10.1 shows Firefox's display of this page, with the small new window on top.

Figure 10.1. A new browser window opened with JavaScript.

[View full size image]