|
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98
CHAPTER 20
Manipulating Windows and Frames with JavaScript
- In this chapter
- Referencing Multiple Windows with JavaScript 486
- Making Use of Window Events 490
- Window Methods for Getting User Input 493
- Filling Your Windows I: The location Object 496
- Filling Your Windows II: The document Object 496
- JavaScript Windows Example 498
- Creating and Using Frames 502
- Communicating Between Frames 502
- Using Hidden Frames 508
- JavaScript Frames Example 509
As discussed in Chapter 19, “The Web Browser Object Model,” you can create, manipulate, and access the properties of Web browser windows by using the window object. Chapter 18 showed the properties, methods, and events associated with the window object. This chapter shows some practical examples of this; it is meant to show you how to create and then use multiple windows.
Listing 20.1 shows the HTML document Window1.htm. This document uses a single JavaScript statement to create a window and load that window with another document (Form1.htm, shown in Listing 20.2). The new window is created using the window object’s open() method. Figure 20.1 shows the result of loading Window1.htm into Internet Explorer. (In many of the examples shown in this chapter, the created windows may be rearranged for improved visibility—all appear in their original size, however).
Listing 20.1 Window1.htm—Create New Web Browser Windows with window.open()
<HTML>
<HEAD>
<TITLE>Window1.htm</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<H1>Window Example #1</H1>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF="mailto:odonnj@rpi.edu">odonnj@rpi.edu</A>
</ADDRESS>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- Hide script from incompatible browsers! -->
MyWindow = window.open("Form1.htm","MyWindow",
"toolbar=no,location=no,directories=no,status=no," +
"menubar=no,scrollbars=no,resizable=no," +
"width=475,height=155")
// Hide script from incompatible browsers! -->
</SCRIPT>
</BODY>
</HTML>
When loaded into a Web browser, the HTML document in Listing 20.1 creates a new window and displays the HTML form given in Listing 20.2.
Listing 20.2 Form1.htm—HTML Documents for Created Windows Should Be Sized Carefully
<HTML>
<HEAD>
<TITLE>Form1.htm</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<TABLE WIDTH=95% BORDER>
<FORM NAME="MyForm">
<TR><TD><B>Form Element Type</B></TD>
<TD><B>Name</B></TD>
<TD> </TD></TR>
<TR><TD><B>TEXT</B> Element</TD>
<TD><I>MyText</I></TD>
<TD><INPUT TYPE="TEXT" NAME="MyText"></TD></TR>
<TR><TD><B>CHECKBOX</B> Element</TD>
<TD><I>MyCheckBox1</I></TD>
<TD><INPUT TYPE="CHECKBOX" NAME="MyCheckBox1"></TD></TR>
<TR><TD><B>CHECKBOX</B> Element</TD>
<TD><I>MyCheckBox2</I></TD>
<TD><INPUT TYPE="CHECKBOX" NAME="MyCheckBox2"></TD></TR>
<TR><TD><B>CHECKBOX</B> Element</TD>
<TD><I>MyCheckBox3</I></TD>
<TD><INPUT TYPE="CHECKBOX" NAME="MyCheckBox3"></TD></TR>
</FORM>
</TABLE>
</BODY>
</HTML>
FIGURE 20.1 JavaScript can create new Web browser windows and configure them to look the way you would like for your applications.
Three arguments apply to the window.open() method, with the following meanings:
- • The first argument is the URL of the HTML document to be loaded into the new window.
- • The second argument is the name of the window that can be used as the TARGET attribute of the <A> tag.
- • The third argument is optional and contains a comma-separated list of configuration options for the created window. The configuration options are the following:
- • toolbar = [yes|no]—Controls the display of the Web browser window toolbar
- • location = [yes|no]—Controls the display of the Web browser window location bar
- • directories = [yes|no]—Controls the display of the Web browser window directory bar
- • status = [yes|no]—Controls the display of the Web browser window status line
- • menubar = [yes|no]—Controls the display of the Web browser window menu bar
- • scrollbars = [yes|no]—Controls the display of the Web browser window scrollbars
- • resizable = [yes|no]—Controls whether the created window can be resized
- • width = # pixels—Sets the width of the new window, in pixels
- • height = # pixels—Sets the height of the new window, in pixels
 | If you want to set one of the options for a new window, set them all; otherwise, your results may not be what you expect because each Web browser (and even the same browser on different platforms) handles the default options differently. It is better to play it safe and completely specify exactly how you want your windows to look.
|
In addition to the arguments for the window.open() method, it also has a return value. The method returns a handle that gives you the name of the newly created window. This enables you to access and manipulate the objects in the new window from the original.
Referencing Multiple Windows with JavaScript
Just creating a new window with the window.open() method does not accomplish that much. Your users can create new windows on their own—for instance, from Netscape Navigator’s File, New menu selection. The window shown in Figure 20.1 was created without any of the controls, such as the menu bar. To enable it to be used as a full-fledged Web browser window, it could just as easily have been created with a menu bar, as well as with any of the other window user-interface elements.
To be able to create and use new windows, you need to be able to reference them. After you know where a new window fits into the Web browser object hierarchy detailed in Chapter 19, you can use the elements of that hierarchy to manipulate what appears in the new window. The next two sections of this chapter show you how to do just that.
• See “Web Browser Object Hierarchy and Scoping,” p. 462.
|
)
){kind=link}