Module 7 - Page 07 - Naming and Targeting Frames

Naming and Targeting Frames

Normally, within a frame site, one clicks on hyper-references in one frame, and HTML pages appear in a DIFFERENT frame, as we saw in the first example in this module.

This behavior requires special treatment, both in the frame page itself, and on the various HTML pages to be displayed within those frames.

Here is an example of a very simple frame site, drawn from an earlier example. Nothing has been added to this code apart from regular hyper-references on each of the pages. When you click on these hyper-references, the new HTML pages appear within the SAME frame, not in a different frame as you would expect.

To cause HTML pages to appear in a DIFFERENT frame from the one where the hyper-reference was clicked, you must NAME your frames, then TARGET those named frames from the hyper-references involved.

First, let's NAME those frames!

Tag: FRAME
Attribute: NAME
Value: set the NAME attribute of the FRAME tag to any name of your choice, NO SPACES IN THE NAME.
Description: Naming frames allows processes (such as frame targeting or javascript commands) to access the frame.

You can't tell a browser which frame you want to send an HTML page to until you NAME the frame! Remember to follow the generalized naming conventions from an earlier module:

NO SPACES IN THE NAMES!
Only use characters from a-z, A-Z, 0-9, and _ (underscore). All other characters (including commas, periods, tildes, exclamation points, hyphens, etc) are considered reserved, and are therefore illegal.
Always start the name with a lower-case letter; no numbers or underscore characters are allowed as the FIRST character of the name (although you may use them anywhere else in the name). An underscore character as the first letter of a frame name, particularly, is reserved and thus illegal.

In addition, when naming FRAMEs (or anything else in HTML using the NAME attribute), don't use a name which is already a tag or attribute name (table, form, name, href, align, font, etc), as those names are probably reserved words and therefore illegal for general use.

Example:

<html>
<head>
<title>Named FRAME Example</title>
</head>
<frameset cols="*,200">
     <frame src="./page1.html" name="fred" />
     <frame src="./page2.html" name="george" />
</frameset>
</html>

Example:

<html>
<head>
<title>Another Named FRAME Example</title>
</head>
<frameset cols="175,*">
     <frame src="./myPage.html" name="nav" />
     <frame src="./myOtherPage.html" name="main" />
</frameset>
</html>

Naming frames based upon their purpose in your overall design is a good practice. In the second example above, I have named my frames "nav" and "main", for the navigation area and the main display area; you may name your frames anything you like, however, as evidenced by the first example above.

Once you have named your frames, you must create hyper-references on your VISIBLE HTML pages which TARGET URLs to the appropriately named frame.

Again, there is NO visible content on your frame page, so you'll have to open up ANOTHER HTML page to create these hyper-references using the TARGET attribute.

Tag: A
Attribute: TARGET
Value: any valid name
Description: the TARGET attribute allows the programmer to TARGET a hyper-reference to a particular named FRAME; instead of having the new HTML page appear inside the SAME frame as a given hyper-reference, a programmer may, instead, have that new HTML page appear inside ANY named frame using the TARGET attribute of the A tag.

Example (frame page):

<html>
<head>
<title>Named FRAME Example</title>
</head>
<frameset cols="175,*">
     <frame src="./myPage.html" name="nav" />
     <frame src="./myOtherPage.html" name="main" />
</frameset>
</html>

Example (myPage.html appearing in "nav" frame):

<html>
<head>
<title>Example Navigation Page</title>
</head>
<body>
<h2>Navigation Links</h2>
<ul>
<li>Here is a <a href="./page1.html" target="main">link</a> to page1.html.</li>
<li>Here is a <a href="./page2.html" target="main">link</a> to page2.html.</li>
</ul>
</body>
</html>

And here is this entire example displayed.

Note how I have added TARGET attributes to the hyper-references on myPage.html? The frame that I want to target is named "main", so I've set my TARGET attributes in the anchor tags to "main".

Here's another exciting example, to drive the point home...

Example (frame page):

<html>
<head>
<title>Named FRAME Example</title>
</head>
<frameset cols="*,200">
     <frame src="./display.html" name="george" />
     <frame src="./navigation.html" name="fred" />
</frameset>
</html>

Example (navigation.html in "fred" frame):

<html>
<head>
<title>Example Navigation Page</title>
</head>
<body>
<h2>Navigation Links</h2>
<ul>
<li>Here is a <a href="./page1.html" target="george">link</a> to page1.html.</li>
<li>Here is a <a href="./page2.html" target="george">link</a> to page2.html.</li>
<li>Here is a <a href="./page3.html" target="george">link</a> to page3.html.</li>
</ul>
</body>
</html>

Here is this entire example displayed.

Remember:

NAME your frames on your frame page.
On your VISIBLE HTML pages, add TARGET attributes to your hyper-references, set to the desired frame name; this will cause those hyper-references to bring up their new HTML pages in the named frame.

What happens if you TARGET a frame that doesn't exist?

If you set the TARGET attribute of an anchor tag to a name which does not match one of the named frames, the browser will open a new browser window; this new window will be named whatever name you've targeted. For instance, if your target="sheila" and there is no "sheila" frame, the browser will open a new window, name it "sheila", and load the desired HTML page into "sheila"; this naming process is invisible to the user.

I can NOT recommend this means of opening new browser windows, however; on many browser versions, it causes a window to open which is identical in size, shape, and position to the OLD window. This usually means that the user can not tell that a new window has opened, and when they try to hit the "Back" button, they find that they can not return to the previous page (since they're no longer in the original browser window). Users do not realize that they must close the new window, and that the old window, with your frameset still loaded in it, is still visible behind; users claim that the web site is "broken", and quit out of their browsers.

If you are using the very newest web browser version, you will not be able to reproduce this particular "feature". Nonetheless, a majority of users are still using browser versions which DO exhibit this behavior, so you mustn't open new browser windows in the manner described above.

If you wish to open a new browser window, you must use JavaScript to do so; we'll talk about how to open new windows using JavaScript in a later module.

Main Menu