Lesson 2: Targeting Frames

Targeting Frames: Updating Two Frames at a Time

Now we are ready to accomplish our original goal. The code for document X, which I have kept secret up to this point, is revealed in Fig. 4:

<html> <head> <title>X</title> </head> <body> <h1>X</h1> <a href="yz.html" target="bottom">YZ</a> <a href="zy.html" target="bottom">ZY</a> </body> </html>

screen shot of x.html

Fig. 4 -- Source code for body document x.html.

Take a close look at the hyperlink code in x.html. The hyperlink attribute "target=bottom" means that the frame named "bottom" will be the recipient of the new document. However, bottom is the name of the parent frame that was previously divided to form the two lower frames. Therefore, if we update bottom with a single body document, then the two lower frames will disappear and be replaced with a single frame containing the linked document. On the other hand, if we update bottom with another frameset document, then the lower frame will be subdivided into the additional frames that are specified in the new frameset.

Now, please read this next sentence very carefully, over and over again until you understand what it means:

We will create the appearance of swapping the lower two frames by replacing bottom, their parent frame, with a new frameset document that places the same two child frames in reverse order.

The frameset document zy.html will set up the two lower frames in reverse order. Fig. 5 is provided so that you can compare zy.html to yz.html and note the subtle difference between them:



`yz.html`	`zy.html`

Now, let's get creative: If the bottom frame of a.html (remember that?) originally contains the frameset document yz.html, and then we update it with the new frameset document zy.html, won't it appear as if documents y.html and z.html are trading places? You bet! But, although it looks like we are updating two frames at the same time, with just one hyperlink, what we are really doing is replacing one frame, the nested frameset, with another frame, which just happens to be yet another nested frameset.

Let's add this "frame-switching" functionality to the hyperlinks in frames Y and Z. We can do this by defining the target property in the hyperlinks of yz.html and zy.html.

However, instead of taking this approach, let's see if we can use one of the implicit frame names instead. Since frames Y and Z were made by dividing the lower frame into left and right columns, there is a special relationship between frames bottom, Y, and Z:

frame bottom is the parent of frames Y and frames Z.

For frames Y and Z, then, the implicit frame name _parent is synonymous to the explicit frame name bottom. So the source code for documents y.html and z.html can be simplified as shown in Fig. 6:



`y.html`	`z.html`

Fig. 6 -- Source code for documents appearing in bottom frame.

And we're done! We have just created a multi-frame document that updates two frames at once, on demand, without updating the entire window. If you already have a frames-compatible browser, give this example a try and watch how it works.

As Netscape frames gain popularity, you will undoubtedly encounter web sites where frames are used to create sophisticated site navigation interfaces, such as those found in Sharky's JavaScript Answers or Printf for Java (jPrintf). Please take a look at them, if you haven't already.

We have covered the basic principles of Netscape frames, including layout control and target control, and you should now be able to create your own framed web sites. However, advanced HTML programmers are encouraged to read the next three lessons, "Targeting Windows," "The Tags," and "Appendix." These three lessons introduce additional frame-related tags and details that will make you an even better frames programmer.

-- End of Lesson 2 --

[ menu | previous page ]