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

Creating and Using Frames

Chapter 7, “Frames,” showed you how to create and use frames in your Web site. You can access and manipulate the contents of these frames by using the frame object. Each of the frames created in a document can be accessed through the frames object array, which is attached to the document object. The most important thing to remember about a frame object is that it is a window object. This means that each frame created is a separate window object, and all the properties, methods, and events associated with window objects can be applied.

• See “Frames,” page 211.

Communicating Between Frames

After you have created a series of frames by using the <FRAMESET> and <FRAME> tags, how do you use JavaScript to access and manipulate each frame? As mentioned in the preceding section, each frame is a separate window object. Therefore, if you can reference each frame, you can use the same techniques that were used with windows for each frame.

The Web Browser Object Model includes several properties that apply to frame and window objects that make referencing different frames much easier. These properties are the self, window, parent, and top properties. Their meanings are as follows:

•  self or window— These properties are used to refer to the current window or frame.

•  parent— This property is used to refer to the window or frame object that contains the current frame.

•  top— This property is used to refer to the topmost window or frame object that contains the current frame.

Understanding the Frames Object Hierarchy

Consider a simple frameset created using the following HTML code:

<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>

This divides the window into three frames: two side-by-side on the top half of the window, and a third occupying the entire bottom half. The object model for this document will appear as shown in Figure 20.11.

FIGURE 20.11  Each frame is associated with a window object, and each can access and manipulate the others.

Given the object hierarchy shown in Figure 20.11, you would reference the frame objects as follows:

•  To reference any of the child frames from the parent document, you could use self.frame_name. You could access the document object of the first frame, for example, through self.MyFrame1.document.

•  To reference the parent document from any of the child frames, you could use parent or top. Any of the child frames could access the document object of the parent document, for example, through parent.document.

---

CAUTION:  

Whenever possible, you should use parent rather than top because parent always refers to the immediate parent of the frame in question. You can use top to refer to the topmost parent containing your frame. If your document is included as a frame in someone else’s HTML document, however, it is likely that your reference to top will result in an error.

---

•  To reference a child frame from another child frame, you would just combine the two already discussed in this list. The document object of the second frame, for instance, could be accessed by either of the other child frames through parent.MyFrame2.document.

Now, what if you introduce another generation to your framed document? The third frame might load an HTML document that itself contains a <FRAMESET> tag to further divide the window into more frames, as in the following:

<FRAMESET COLS="33%,33%,*">
   <FRAME SRC="Form.htm" NAME="MyFrame1">
   <FRAME SRC="Form.htm" NAME="MyFrame2">
   <FRAME SRC="Form.htm" NAME="MyFrame3">
</FRAMESET>

This would result in the object hierarchy shown in Figure 20.12.

FIGURE 20.12  Through multiple framesets, it is possible to produce an intricate hierarchy of frame objects.

This would result in a window showing a total of five frames. The top half of the window would show two frames, part of the first generation of frame objects. The bottom half of the window would show three frames, part of the second generation of frame objects. The following examples show you ways to reference the document object of the different generations of frames and parent framesets:

•  Reference first-generation MyFrame1 document object from topmost parent:
self.MyFrame1.document

•  Reference second-generation MyFrame1 document object from topmost parent:
self.MyFrame3.MyFrame1.document

•  Reference first-generation MyFrame1 document object from the first-generation frame (MyFrame2) or the second-level parent (MyFrame3):
parent.MyFrame1.document

•  Reference first-generation MyFrame1 document object from any of the second-generation frames:
parent.parent.MyFrame1.document, or
top.MyFrame1.document

•  Reference second-generation MyFrame1 document object from any of the other second-generation frames:
parent.MyFrame1.document

Multiple Frame Access Example

Listings 20.12 through 20.14 show an example of the kind of multiple frame, multiple generation frame setup discussed in the preceding section. Notice that a few things from this example demonstrate the object-oriented nature of JavaScript, which gives you the flexibility to accomplish multiple things.

•  The same HTML document is loaded into each of the five frames that results from this example. Thus, each form element has the same name. Because of the object hierarchy that results from the multiple frames, however, it is possible to uniquely specify each element.

•  Likewise, both the first and second-generation frames are given the same names. Again, the object hierarchy enables the frames to be uniquely addressed, accessed, and manipulated.