|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
Referencing Child WindowsListing 20.3 shows Window2.htm—this HTML document is similar to Window1.htm shown in Listing 20.1. It loads the same document, Form1.htm, into the new window. It also includes a JavaScript, which shows you how you can access and manipulate the objects in a child window from the parent window. The parent window is the window in which the original document—Window2.htm, in this case—is loaded. The window it creates is the child window. In this case, the JavaScript function updateWindow() is attached to the onChange event of the HTML form text field and the onBlur events of the check boxes. In this way, whenever the text field is changed or a check box is checked or unchecked (and the focus moved elsewhere), updateWindow() is called. This function then copies all the values of the HTML form in the parent window into the corresponding fields of the child window. Listing 20.3 Window2.htm—JavaScripts Enable You to Manipulate Multiple Windows from a Single Document
<HTML>
<HEAD>
<TITLE>Window2.htm</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- Hide script from incompatible browsers! -->
function updateWindow() {
self.MyWindow.document.MyForm.MyText.value = document.MyForm.MyText.value
self.MyWindow.document.MyForm.MyCheckBox1.checked =
document.MyForm.MyCheckBox1.checked
self.MyWindow.document.MyForm.MyCheckBox2.checked =
document.MyForm.MyCheckBox2.checked
self.MyWindow.document.MyForm.MyCheckBox3.checked =
document.MyForm.MyCheckBox3.checked
}
// Hide script from incompatible browsers! -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<H1>Window Example #2</H1>
<HR>
<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" onChange="updateWindow()"></TD></TR>
<TR><TD><B>CHECKBOX</B> Element</TD>
<TD><I>MyCheckBox1</I></TD>
<TD><INPUT TYPE="CHECKBOX" NAME="MyCheckBox1" onBlur="updateWindow()">
</TD></TR>
<TR><TD><B>CHECKBOX</B> Element</TD>
<TD><I>MyCheckBox2</I></TD>
<TD><INPUT TYPE="CHECKBOX" NAME="MyCheckBox2" onBlur="updateWindow()">
</TD></TR>
<TR><TD><B>CHECKBOX</B> Element</TD>
<TD><I>MyCheckBox3</I></TD>
<TD><INPUT TYPE="CHECKBOX" NAME="MyCheckBox3" onBlur="updateWindow()">
</TD></TR>
</FORM>
</TABLE>
<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>
The document object of the child window is accessed by this JavaScript, running in the parent window, through the self.MyWindow object. The self object indicates the current window; the MyWindow is the return value of the window.open() method, indicating that you want to access the objects of the child object. Therefore, self.MyWindow.document gets to the document object of the child window, and from there you can access the child window’s objects.
Referencing Parent WindowsIs it possible to go the other way? Can scripts running in the child window access and manipulate objects in the parent window? Yes, they can. The next example uses the HTML documents Window3.htm (which is the same as Window2.htm from Listing 20.3, except for a new title and heading) and Form3.htm (shown in Listing 20.4). Form3.htm uses a similar JavaScript, also called updateWindow(), to automatically update the fields of the parent window with information entered into the child window form fields. To reference the parent window from a child, the opener object is used. Thus opener.document gets the JavaScript in the child window to the document object of the parent, from which the other objects can be referenced. Figure 20.3 shows the values entered into the child window forms automatically reflected into the parent. Listing 20.4 Form3.htm—Child-to-Parent as Well as Parent-to-Child Communication Is Possible
<HTML>
<HEAD>
<TITLE>Form3.htm</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- Hide script from incompatible browsers! -->
function updateWindow() {
opener.document.MyForm.MyText.value = document.MyForm.MyText.value
opener.document.MyForm.MyCheckBox1.checked =
document.MyForm.MyCheckBox1.checked
opener.document.MyForm.MyCheckBox2.checked =
document.MyForm.MyCheckBox2.checked
opener.document.MyForm.MyCheckBox3.checked =
document.MyForm.MyCheckBox3.checked
}
// Hide script from incompatible browsers! -->
</SCRIPT>
</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" onChange="updateWindow()"></TD></TR>
<TR><TD><B>CHECKBOX</B> Element</TD>
<TD><I>MyCheckBox1</I></TD>
<TD><INPUT TYPE="CHECKBOX" NAME="MyCheckBox1" onBlur="updateWindow()">
</TD></TR>
<TR><TD><B>CHECKBOX</B> Element</TD>
<TD><I>MyCheckBox2</I></TD>
<TD><INPUT TYPE="CHECKBOX" NAME="MyCheckBox2" onBlur="updateWindow()">
</TD></TR>
<TR><TD><B>CHECKBOX</B> Element</TD>
<TD><I>MyCheckBox3</I></TD>
<TD><INPUT TYPE="CHECKBOX" NAME="MyCheckBox3" onBlur="updateWindow()">
</TD></TR>
</FORM>
</TABLE>
</BODY>
</HTML>
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.
|
)
)
){kind=link}
){kind=link}