Nomius Lesson 2

Netscape Frames:
Targeting Frames


Learn more about how you can advertise on this page!

Introduction

In the previous lesson, we discussed two kinds of documents: layout documents and contents documents. In the example, we used layout documents a.html and yz.html to define frame divisions within the browser screen. These files are shown in Fig. 1.

<html> <head> <title>A</title> </head> <frameset rows=*,*> <frame src=x.htm> <frame src=yz.htm name=bottom> </frameset> </html> <html> <head> <title>YZ</title> </head> <frameset cols=*,*> <frame src=y.htm> <frame src=z.htm> </frameset> </html>
a.html yz.html
Fig. 1 -- Layout document source code.

Notice that these files contain links to contents documents x.html, y.html, and z.html. These are just regular HTML documents, viewable even with a frames-incapable browser. We concluded our example in Lesson 1 by laying out three contents documents, x.html, y.html, and z.html, into frames, as shown in Fig. 2.

Fig. 2 -- Three separate documents displayed in single window using frames.

We will program the hyperlinks in each of the frames to update the relative positions of documents Y and Z, so that when hyperlink "YZ" is selected, the browser window will appear as in Fig. 2, and when hyperlink "ZY" is selected, the browser window will appear as in Fig. 3.

Fig. 3 -- Previous figure with frames Y and Z switched.

This means that the hyperlinks in document X will update other frames and hyperlinks in documents Y and Z will update their own frames.

Hyperlinks in Frames

Let's first consider what happens when a hyperlink is selected in a normal HTML document. Usually, when a user selects a hyperlink to another document, the current document disappears from the browser window and is replaced by another document. This is just the common method of navigating through documents that we have all come to love. Each hyperlink, when selected, instructs the browser to update the entire window with a new document.

Frames, however, present a different scenario. When hyperlinks in framed documents are selected, the browser may update just the frame containing the hyperlink, a different frame, a set of frames, or even the entire window. Thus, when a hyperlink is selected, some or all parts of the browser window may change, depending on parameters specified in the hyperlink.

Hyperlink Targets

How, then, does a programmer specify the area to be updated when a hyperlink is selected? Netscape Communications has implemented a new keyword, target, for this purpose. For each hyperlink, it is now possible to specify where the new document should be displayed. The format for a hyperlink with a target is
<a href=documentURL target=targetname>Hyperlink Text</a>
targetname may be either an explicit name assigned to frames in layout documents, such as the frame name "bottom" appearing in layout document a.html, and an implicit name, which is determined by the frame's relationship to other frames. Implicit names are reserved words beginning with an underscore (_). Some of these are listed below:
_self
Directs the browser to update the frame containing the selected hyperlink. This is the default target if no target is specified at all.
_parent
Directs the browser to update the parent frame if the frame containing the hyperlink is a child frame, otherwise has the same effect as _self.
_top
Directs the browser to update the entire window, regardless of the current frame layout.

Frame Names

If all hyperlinks used implicit names to specify targets, then there would be no need to assign names to frames. However, there are cases where one frame cannot access another frame via the implicit names, and for this reason it is sometimes necessary to specify a target frame by its given name.

You can assign names to frames by including the tag property "name=frame_name" in the <frame> tag, as shown in the second frame definition in a.html. In this example, the upper row has no name, while the lower row has the name "bottom". Note that in this example a name is being assigned not just to a frame, but to a collection of frames, or the frames containing documents Y and Z. This will make it possible for a hyperlink to target the entire row for update.

Let's see it in an example!

Now we are ready to accomplish our original goal. The code for document X appears below:

<head> <title>X</title> </head> <body> <h1>X</h1> <a href=yz.htm target=bottom>YZ</a> <a href=zy.htm target=bottom>ZY</a> </body> </html>
Take a close look at the hyperlinks in this code. The hyperlink attribute "target=bottom" means that the frame named "bottom" will be the target for the new document when the user selects the hyperlink. If you recall that the document displayed in this frame was another layout document that divided its area into two children frames, then it should not be hard to understand why updating the frame "bottom" is equivalent to updating both of the frames that appear in it! Indeed, when the user selects one of these hyperlinks, it will appear as if both frames were being updated simultaneously.

<html> <head> <title>YZ</title> </head> <frameset cols=*,*> <frame src=y.htm> <frame src=z.htm> </frameset> </html> <html> <head> <title>ZY</title> </head> <frameset cols=*,*> <frame src=z.htm> <frame src=y.htm> </frameset> </html>
yz.html zy.html
Fig. 4 -- Source code for layout documents that will replace the bottom frame.

We now move on to add the same functionality to the hyperlinks in frames Y and Z. Although much of the procedure is the same, the context for hyperlinks in frames Y and Z is different because the hyperlinks in these frames will update their own frames. In other words, the hyperlinks in frames Y and Z will update themselves by updating their own parent frame. This is a good opportunity to demonstrate the use of an implicit frame name, "_parent," which refers to the parent frame (or window) of the frame containing the hyperlink. The source code for frames Y and Z appears in Fig. 5. (Because both of these frames have the same parent frame, you can think of them as "brother documents.")

<html> <head> <title>Y</title> </head> <body> <h1>Y</h1> <a href=yz.htm target=_parent>YZ</a> <a href=zy.htm target=_parent>ZY</a> </body> </html> <html> <head> <title>Z</title> </head> <body> <h1>Z</h1> <a href=yz.htm target=_parent>YZ</a> <a href=zy.htm target=_parent>ZY</a> </body> </html>
y.html z.html
Fig. 5 -- Source code for documents appearing in bottom frame.

Notice the use of the implicit frame name "_parent". We could just as well have used "bottom" as the target, and the result would have been the same.

And now we're done! We've just created a multi-frame document that updates selected frames 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 documents where they are used to to create sophisticated document navigation interfaces, such as those found in Executive Recruitment or Anatomy of an Eye, two interesting examples presented by Netscape Communications. I recommend you take a look at them if you haven't already.

We have now covered the basic principles of Netscape frames, and you should be able to create your own frame documents at this point. However, advanced HTML programmers are encouraged to read the next three documents, "Targeting Windows," "The Tags," and "implementation Notes." These three documents cover additional tags and details which enable frame programmers to have more precise control over their frame documents.

Netscape Frames Main Menu Questions about frames
previous lesson: "Laying Out Frames" next lesson: "Targeting Windows"

Please turn on your graphics. ©1996 Charlton Rose. No part of this document may be reproduced in any form without the express permission of the author.
sharky@byu.edu