|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
Listing 20.12 Frameset1.htm—Top-level Frameset
<HTML>
<HEAD>
<TITLE>Frameset1.htm</TITLE>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="50%,50%">
<FRAME SRC="Form.htm" NAME="MyFrame1">
<FRAME SRC="Form.htm" NAME="MyFrame2">
</FRAMESET>
<FRAME SRC="Frameset2.htm" NAME="MyFrame3">
</FRAMESET>
</HTML>
Listing 20.13 Frameset2.htm—Second Generation Frameset <HTML> <HEAD> <TITLE>Frameset2.htm</TITLE> </HEAD> <FRAMESET COLS="33%,33%,*"> <FRAME SRC="Form.htm" NAME="MyFrame1"> <FRAME SRC="Form.htm" NAME="MyFrame2"> <FRAME SRC="Form.htm" NAME="MyFrame3"> </FRAMESET> </HTML> Listing 20.14 Form.htm—HTML Document to Be Included in Each Frame
<HTML>
<HEAD>
<TITLE>Form.htm</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<TABLE>
<FORM NAME="MyForm">
<TR><TD>
<INPUT TYPE=TEXT NAME="MyText1"
onChange="self.document.MyForm.MyText4.value =
document.MyForm.MyText1.value">
</TD></TR>
<TR><TD>
<INPUT TYPE=TEXT NAME="MyText2"
onChange="parent.MyFrame2.document.MyForm.MyText4.value =
document.MyForm.MyText2.value">
</TD></TR>
<TR><TD>
<INPUT TYPE=TEXT NAME="MyText3"
onChange="top.MyFrame2.document.MyForm.MyText4.value =
document.MyForm.MyText3.value">
</TD></TR>
<TR><TD>
<INPUT TYPE=TEXT NAME="MyText4">
</TD></TR>
</FORM>
</TABLE>
<HR>
<CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF="mailto:odonnj@rpi.edu">odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
</HTML>
The HTML form specified in the document shown in Listing 20.14 has small JavaScript functions attached to the onChange events of each of the first three text elements. The first copies any entered text into the fourth text element of the current frame. The second copies entered text into the fourth text element of the parent’s MyFrame2 frame. The third copies entered text into the fourth text element of the grandparent’s MyFrame2 frame. Figure 20.13 shows how this works when text is entered into the first of the second-generation frames. Line 1 is copied into line 4 in the same frame. Line 2 is copied into line 4 of the second of the second-generation frames. Line 3 is copied into line 4 of the second of the first-generation frames. Figures 20.14 and 20.15 show the effects of typing the same lines into the first three lines in one of the first-generation frames. Note that when line 3 is entered, it overwrites line 4 of the second of the first-generation frames. This is because parent refers to itself when you are already at the top level. Therefore, for first-generation frames, parent.parent and parent are equivalent.
Using Hidden FramesYou can build frame-based pages another way, too—by placing all the HTML and JavaScript code that you don’t want changed into a hidden frame. Depending on the Web browser your users are using to look at your site and how you specify the borders of your frames, this frame may not actually be completely invisible. It might appear as a tiny space with one or two borders shown on it. To specify a hidden frame, add another frame to your frameset, but make sure the other frames take up all the available space. If you are using two frames, for example, as in the following: <FRAMESET ROWS="50%,50%"> <FRAME NAME="MyFrame1" SRC="Frame1.htm"> <FRAME NAME="MyFrame2" SRC="Frame2.htm"> </FRAMESET> you could add a hidden frame this way: <FRAMESET ROWS="50%,50%,*"> <FRAME NAME="MyFrame1" SRC="Frame1.htm"> <FRAME NAME="MyFrame2" SRC="Frame2.htm"> <FRAME NAME="MyHidden" SRC="Hidden.htm"> </FRAMESET> With this, the first two frames take up 100% of the page, which means that the last frame will be made as small as the browser can make it. You can then place the JavaScript code that you wish to persist in the hidden HTML document and use the techniques shown in this chapter to manipulate the contents of the other frames in the document. JavaScript Frames ExampleIn this frames example, you will see how to set up a Web page that is roughly equivalent to the windows example shown earlier in this chapter. A Web page will be created with three frames; the top one will have buttons that use attached JavaScripts to change the contents of the other two. Listing 20.15 shows the main document, which simply defines the frameset to be used. Listing 20.15 FramEx.htm—The Main Document of a Framed Web Page Will Usually Be Pretty Simple, Just Setting Up the Frameset
<HTML>
<HEAD>
<TITLE>JavaScript Frames Example</TITLE>
</HEAD>
<FRAMESET ROWS="25%,*">
<FRAME SRC="Buttons.htm" NAME="MyFrameBut">
<FRAMESET COLS="200,*">
<FRAME SRC="" NAME="MyFramePic">
<FRAME SRC="" NAME="MyFrameBio">
</FRAMESET>
</FRAMESET>
</HTML>
As shown in Listing 20.15, the only HTML document loaded initially is Buttons.htm, which loads the buttons into the top frame used to manipulate the other two (see Figure 20.16). This file is listed in Listing 20.16; it is similar to the buttons used in the window example. No buttons are needed to open and close the windows (or frames, in this case) because the frames already exist. Also, the contents of the frames are manipulated using the location.href property of the parent.MyFramePic and parent.MyFrameBio objects, respectively, as shown in Figure 20.17. Listing 20.16 Buttons.htm—Frames and Windows Can Both Be Easily Controlled Using JavaScript
<HTML>
<HEAD>
<TITLE>Buttons.htm</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide this script from incompatible Web browsers!
var n = 0;
function loadnex() {
n++;
if (n > 5) n = 5;
picname = "Pic" + n + ".htm";
bioname = "Bio" + n + ".htm";
if (n == 5) bioname = "Bio5f.htm";
//
parent.MyFramePic.location.href = picname;
parent.MyFrameBio.location.href = Bioname;
}
function loadpre() {
n--;
if (n < 1) n = 1;
picname = "Pic" + n + ".htm";
bioname = "Bio" + n + ".htm";
//
parent.MyFramePic.location.href = picname;
parent.MyFrameBio.location.href = bioname;
}
// Hide script from incompatible browsers! -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<FORM NAME="MyForm">
<CENTER>
<TABLE>
<TR><TD><INPUT TYPE="button" NAME="PreBut" VALUE="Load Previous"
onClick="loadpre()"></TD>
<TD><INPUT TYPE="button" NAME="NexBut" VALUE="Load Next"
onClick="loadnex()"></TD>
</TR>
</TABLE>
</CENTER>
</FORM>
<HR>
<ADDRESS>
Jim O’Donnell, <A HREF="mailto:odonnj@rpi.edu">odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
</HTML>
It is interesting to note that the same HTML documents for the pictures and biographies can be used in this example as in the preceding window example. The only exception to this is the final biography entry, which provides a link to an outside document that will replace the entire frameset. This document is shown in Listing 20.17 and uses the location.href property of the parent object to do this (see Figure 20.18). Listing 20.17 Bio5f.htm—Each of the Frames Can Manipulate the Others or Load a Completely New Document
<HTML>
<HEAD>
<TITLE>Bio5.htm</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide this script from incompatible Web browsers!
function loadmain() {
parent.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}
){kind=link}
){kind=link}
){kind=link}
){kind=link}