|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
JavaScript Windows ExampleThis example shows one application of how to create and use other Web browser windows. In this example, JavaScripts are attached to the onClick events of HTML forms buttons and are used to open and/or fill two other windows. The object of the windows, in this application, is to display pictures and accompanying biographical information. This example shows how it is possible to create HTML forms-based buttons that call JavaScripts and use them to create, to assign content to, and to destroy other windows. In addition, this example shows you how a script in a created window can manipulate the content back in the window that created it. Listing 20.10 shows WindEx.htm, the top-level HTML document for this example. The four buttons shown by this document each have JavaScripts attached to their onClick attributes. Clicking each button executes the appropriate JavaScript. Listing 20.10 WindEx.htm—Create and Manipulate Browser Windows with JavaScript
<HTML>
<HEAD>
<TITLE>JavaScript Window Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide this script from incompatible Web browsers!
var picwin = null;
var biowin = null;
var n = 0;
function openpic() {
if (!picwin)
picwin =
open("","PicWindow","width=200,height=250,screenX=70,screenY=270");
}
function openbio() {
if (!biowin)
biowin =
open("","BioWindow","width=400,height=250,screenX=320,screenY=270");
}
function closeboth() {
if (picwin) {
picwin.close();
picwin = null;
}
if (biowin) {
biowin.close();
biowin = null;
}
}
function loadnex() {
if (!picwin) openpic();
if (!biowin) openbio();
//
n++;
if (n > 5) n = 5;
picname = "Pic" + n + ".htm";
bioname = "Bio" + n + ".htm";
//
self.picwin.location.href = picname;
self.biowin.location.href = bioname;
self.picwin.focus();
self.biowin.focus();
}
function loadpre() {
if (!picwin) openpic();
if (!biowin) openbio();
//
n--;
if (n < 1) n = 1;
picname = "Pic" + n + ".htm";
bioname = "Bio" + n + ".htm";
//
self.picwin.location.href = picname;
self.biowin.location.href = bioname;
self.picwin.focus();
self.biowin.focus();
}
// Hide script from incompatible browsers! -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF onUnload="closeboth()">
<FORM NAME="MyForm">
<CENTER>
<TABLE>
<TR><TD><INPUT TYPE="button" NAME="OpenWin" VALUE="Open Windows"
onClick="openpic();openbio()"></TD>
<TD><INPUT TYPE="button" NAME="PreBut" VALUE="Load Previous"
onClick="loadpre()"></TD>
<TD><INPUT TYPE="button" NAME="NexBut" VALUE="Load Next"
onClick="loadnex()"></TD>
<TD><INPUT TYPE="button" NAME="CloseWin" VALUE="Close Windows"
onClick="closeboth()"></TD>
</TR>
</TABLE>
</CENTER>
</FORM>
<HR>
<ADDRESS>
Jim O’Donnell, <A HREF="mailto:odonnj@rpi.edu">odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
</HTML>
The four buttons created by this HTML document (see Figure 20.9)—through the attached JavaScript functions—perform the following functions:
The last thing we want to do is to enable the user, from the last picture/bio combination, to link back to another Web site for additional information. But, we want that Web site to appear in the main window (the one where the control buttons are) and we want the two created windows to be closed. These two tasks are accomplished as follows. Listing 20.11 shows the HTML loaded with the last bio information. When the button created there is pressed, a JavaScript is called, which changes where the main window is looking by referring to the location.href property of the self.opener object. The self.opener object refers to the window that opened the current window—the main window, in this case.
How do we get the two created windows to be closed when the main window moves to another location? This is done with the onUnload window event, placed into the <BODY> tag of the main window and used to call the closeboth() JavaScript function. Listing 20.11 Bio5.htm—Created Windows Can Access and Manipulate the Contents of Their Creators
<HTML>
<HEAD>
<TITLE>Bio5.htm</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide this script from incompatible Web browsers!
function loadmain() {
self.opener.location.href=<http://www.rpi.edu/~odonnj>
}
// Hide script from incompatible browsers! -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
For more exciting (?) and (hopefully) current information about me, my life, my
interests, and whatever else catches my fancy, be sure to check out my Web
site...
<FORM NAME="MyForm">
<CENTER>
<TABLE>
<TR><TD><INPUT TYPE="button" VALUE="The House of JOD"
onClick="loadmain()"></TD>
</TR>
</TABLE>
</CENTER>
</FORM>
</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}