HTML and CSS

Naming and Targeting Frames

Before you can ensure navigation within frames, you've got to first name the frames. Then you target them using the target attribute. There's also another target method you'll explore, referred to as magic target names.

Name targeting is done using the name attribute with a value that describes the frame. Typically, this value describes the function of that frame. So a navigation frame might be called nav, a content frame content, and so forth.

Example 6-9 describes a frameset document with all the frames properly named.

Example 6-9. Naming frames
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Frames with Names</title>
</head>

<frameset cols="200, *">
<frame src="menu.html" marginheight="5" marginwidth="5" noresize=
"noresize" scrolling="auto" name="menu" />
<frame src="main.html" marginheight="9" marginwidth="9" noresize="noresize"
 scrolling="auto" name="content" />
</frameset>

</html>

The document now sets up a frame page with a menu and a content area. Now that the specific frames are named, you can add targets to any links within the HTML so that the behavior works properly.

If you want to click a link in the menu frame and have the corresponding link page load into the content frame, you use the target attribute with a value of the page's name in the link (see Example 6-10).

Example 6-10. Targeting frames with the target and name attributes
<ul>
<li><a href="about.html" target="content">About the Company</a></li>
<li><a href="clients.html" target="content">Company Clients</a></li>
<li><a href="contact.html" target="content">Contact Company</a></li>
</ul>

Now any time you click a link, the about, clients, or contact documents will load into the named content frame.

Magic Target Names

Magic target names are four predefined names within HTML that cause a specific behavior when a link is activated:

  • target="_blank" The _blank target name causes the targeted document to open in a completely new browser window.

  • target="_self" The targeted document will load in the same window where the originating link exists.

  • target="_parent" This loads the targeted document into the link's parent frameset.

  • target="_top" Use this attribute to load the link into the full window, overriding any existing frames.

If you want to break out of your frames and have a full, frameless document fill the window, do not use the name value you provided earlier in your target; use the magic target name, _top:

<li><a href="contact.html" target="_top">Contact Company</a></li>

This results in the contact.html page completely overriding the frameset document and all corresponding frames (see Figure 6-7).

Figure 6-7. Using a magic target name, the contact page is now linked so that it completely overrides the frameset and loads into the original containing window.

NOTE

Do not try to force another person's site into your frames. This is considered problematic and possibly illegal. Also, be careful when naming targets yourself, avoid mixed case, and definitely avoid any symbols, such as the underscore, which is already reserved for the magic target name. Finally, using the _blank magic target name forces a new browser to open, which many people find troublesome.