Using JavaScript to Work with Windows and Frames
- Controlling Windows with Objects
- Moving and Resizing Windows
- Using Timeouts
- Displaying Dialog Boxes
- Working with Frames
- Workshop: Creating a Navigation Frame
- Summary
- Q&A
- Quiz
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
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.
In this hour, you'll learn more about some of the most useful objects in the level 0 DOM—browser windows and frames—and how JavaScript can work with them. Hour 11 covers the following topics:
-
The window object hierarchy
-
Creating new windows with JavaScript
-
Delaying your script's actions with timeouts
-
Displaying alerts, confirmations, and prompts
-
Using JavaScript to work with frames
-
Creating a JavaScript-based navigation frame
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 document—for example, the instructions for a game—without 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");
NOTE
You can also manipulate the current window in a variety of ways from a signed script, which has the user's permission to gain greater control over the browser. See Appendix A, "Other Javascript Resources," for a list of Web sites with information about signed scripts and other advanced features.
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:
updatewindow.close();
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.
Listing 11.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="winform">
<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 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.
){kind=link}
Figure 11.1. A new browser window opened with JavaScript.