- Controlling Windows with Objects
- Moving and Resizing Windows
- Using Timeouts
- Displaying Dialog Boxes
- Working with Frames
- Workshop: Creating a Navigation Frame
You should now have a basic understanding of the objects in the level 0 DOM, and the events that can be used with each object.
The window object hierarchy
Delaying your script's actions with timeouts
Displaying alerts, confirmations, and prompts
Controlling Windows with Objects
In Hour 9, "Working with the Document Object Model," 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 allows 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 section, you can have more than one window on the screen at the same time, and can refer to them with different names.
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, 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.
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 may 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, 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. Netscape doesn't allow you to close the main browser window without the user's permission; its main purpose is for closing windows you have created. For example, this statement closes a window called updatewindow:
As another example, Listing 11.1 shows an HTML document that enables you to open a new window by pressing a button. (I have specified a very small size for the second window so you can tell them apart.) You can then press another button to close the new window. The third button attempts to close the current window. Netscape allows this, but asks for confirmation first.
This example uses event handlers to do its work, one for each of the buttons. Figure 11.1 shows Netscape's display of this page, with the small new window on top.