Chapter 11
Frames
In this chapter:
An Overview of Frames
Frame Tags
Frame Layout
Frame Contents
The <noframes> Tag
Inline Frames
Named Frame or Window Targets
Beginning with Netscape Navigator 2.0, HTML authors have been able to divide the browser's main display window into independent window frames, each simultaneously displaying a different document--something like a wall of monitors in a TV control room. Instantly popular, frames were adopted (and extended) by Microsoft for Internet Explorer and are standard features for HTML 4 and XHTML.
An Overview of Frames
Figure 11-1 is a simple example of a frame display. It shows how the document window may be divided into columns and rows of individual frames separated by rules and scroll bars. Although it is not immediately apparent in the example, each frame in the window is displaying an independent document. We use different HTML documents in the example, but the individual documents may contain any valid content the browser is capable of displaying, including XHTML documents and multimedia. If the frame's contents include a hyperlink that the user selects, the new document's contents--even another frame document--may replace that same frame, another frame's content, or the entire browser window.
Figure 11-1.
A simple six-panel frame layout for Netscape
|
|
Frames are enabled with a special frame document. Its contents do not get displayed. Rather, the frame document contains extension tags that tell the browser how to divide its main display window into discrete frames and what documents go inside the frames.
The individual documents referenced and displayed in the frame document window act independently, to a degree; the frame document controls the entire window. You can, however, direct one frame's document to load new content into another frame. That's done by attaching a name to a frame and targeting the named frame with a special attribute for the hyperlink <a> tag.
Frame Tags
You need to know only three tags to create a frame document: <frameset>, <frame>, and <noframes>. In addition, the HTML 4 and XHTML standards provide the <iframe> tag, which you may use to create inline, or floating, frames.
A frameset is simply the collection of frames that make up a browser's window. Column- and row-definition attributes for the <frameset> tag let you define the number and initial sizes for the columns and rows of frames. The <frame> tag defines which document--HTML or otherwise--initially goes into the frames within those framesets and is where you may give the frame a name to use for document hypertext links.
Here is the HTML source that was used to generate Figure 11-1:
<html>
<head>
<title>Frames Layout</title>
</head>
<frameset rows="60%,*" cols="65%,20%,*">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html" name="fill_me">
<frame scrolling=yes src="frame4.html">
<frame src="frame5.html">
<frame src="frame6.html">
<noframes>
Sorry, this document can be viewed only with a
frames-capable browser.
<a href = "frame1.html">Take this link</a>
to the first HTML document in the set.
</noframes>
</frameset>
</html>
Notice a few things in the simple frame example and its rendered image (Figure 11-1). First, the order in which the browser fills the frames in a frameset goes across each row. Second, Frame 4 sports a scrollbar because we told it to, even though the contents may otherwise fit without scrolling. (Scrollbars automatically appear if the contents overflow the frame's dimensions, unless explicitly disabled with the scrolling attribute in the <frame> tag.) See <frame>
Another item of interest is the name attribute in one of the frame tags. Once named, you can reference a particular frame as the location in which to display a hypertext-linked document. To do that, you add a special target attribute to the anchor (<a>) tag of the source hypertext link. For instance, to link a document called new.html for display in Frame 3, which we've named "fill_me", the anchor looks like this:
<a href="new.html" target="fill_me">
If the user chooses the link, say in Frame 1, the new.html document will replace the original frame3.html contents in Frame 3. See target attribute
Finally, although Netscape and Internet Explorer both support frames, it is possible that users with some other browser will try and view your frame documents. That's why each of your key frame documents should provide a back door to your document collection with the <noframes> tag. Frame-capable browsers display your frames; non-frame-capable browsers display the alternative <noframes> content.
What's in a Frame?
Anyone who has opened more than one window on their desktop display to compare contents or operate interrelated applications knows instinctively the power of frames.
One simple use for frames is to put content that is common in a collection, such as copyright notices, introductory material, and navigational aids, into one frame, with all other document content in an adjacent frame. As the user visits new pages, each loads into the scrolling frame, while the fixed-frame content persists.
A richer frame document-enabled environment provides navigational tools for your document collections. For instance, assign one frame to hold a table of contents and various searching tools for the collection. Have another frame hold the user-selected document contents. As users visit your pages in the content frame, they never lose sight of the navigational aids in the other frame.
Another beneficial use of frame documents is to compare a returned form with its original for verification of the content by the submitting user. By placing the form in one frame and its submitted result in another, you let the user quickly verify that the result corresponds to the data entered in the form. If the results are incorrect, the form is readily available to be filled out again.
Frame Layout
Frame layout is similar to table layout. Using the <frameset> tag, you can arrange frames into rows and columns while defining their relative or absolute sizes.
The <frameset> Tag
The <frameset> tag lets you define a collection of frames and control their spacing and borders. Use the <frameset> tag to define a collection of frames and other framesets. Framesets also may be nested, allowing for a richer set of layout capabilities.
|
Function:
Define a collection of frames
Attributes:
| BORDER |
ONBLUR |
| BORDERCOLOR |
ONFOCUS |
| CLASS |
ONLOAD |
| COLS |
ONUNLOAD |
| FRAMEBORDER |
ROWS |
| FRAMESPACING |
STYLE |
| ID |
TITLE |
End tag:
</frameset>; never omitted
Contains:
frameset_content
Used in:
html_content
|
Use the <frameset> tag in lieu of a <body> tag in the frame document. You may not include any other content except valid <head> and <frameset> content in a frame document. Combining frames with a conventional document containing a <body> section may result in unpredictable browser behavior.
The rows and cols attributes
The <frameset> tag has one required attribute: either cols or rows--your choice. They define the size and number of columns (cols) or rows of either frames or nested framesets for the document window. Both attributes accept a quote-enclosed, comma-separated list of values that specify either the absolute (pixels) or relative (percentage or remaining space) width (for columns) or height (for rows) for the frames. The number of attribute values determines how many rows or columns of frames the browser will display in the document window.
As with tables, the browser will match the size you give a frameset as closely as possible. The browser will not, however, extend the boundaries of the main document window to accommodate framesets that would otherwise exceed those boundaries or fill the window with empty space if the specified frames don't fill the window. Rather, the browsers allocate space to a particular frame relative to all other frames in the row and column and resolutely fills the entire document window. (Did you notice that a frame document window does not have scrollbars?)
For example:
<frameset rows="150,300,150">
creates three rows of frames, each extending across the entire document window. The first and last frames are set to 150 pixels tall, the second to 300 pixels. In reality, unless the browser window is exactly 600 pixels tall, the browser automatically and proportionately stretches or compresses the first and last frames so that each occupies one quarter of the window space. The center row occupies the remaining half of the window space.
Frame row and column size values expressed as a percentage of the window dimensions are more sensible. For instance, the following example is effectively identical to the previous one:
<frameset rows="25%,50%,25%">
Of course, if the percentages don't add up to 100 percent, the browser automatically and proportionally resizes each row to make up the difference.
If you are like us, making things add up is not a strength. Perhaps some of the frame designers suffer the same difficulty, which would explain why they included the very nifty asterisk option for <frameset> rows and cols values. It tells the browser to size the respective column or row to whatever space is left over after putting adjacent frames into the frameset.
For example, when the browser encounters the following frame tag:
<frameset cols="100,*">
it makes a fixed-sized column 100 pixels wide, and then creates another frame column that occupies all of the remaining space in the frameset.
Here's a fancier layout example:
<frameset cols="10,*,10">
This one creates two very thin columns down the edges of the frameset and gives the remaining center portion to the middle column.
You may also use the asterisk for more than one row- or column-attribute value. In that case, the corresponding rows or columns equally divide the available space. For example:
<frameset rows="*,100,*">
creates a 100-pixel tall row in the middle of the frameset and equal-sized rows above and below it.
If you precede the asterisk with an integer value, the corresponding row or column gets proportionally more of the available space. For example:
<frameset cols="10%,3*,*,*">
creates four columns: the first column occupies 10 percent of the overall width of the frameset. The browser then gives the second frame 3/5 of the remaining space, and the third and the fourth are each given 1/5 of the remaining space.
Using asterisks (especially with the numeric prefix) makes it easy to divide up the remaining space in a frameset.
Be aware, too, that unless you explicitly tell it not to, the browser lets users manually resize the individual frame document's columns and rows, and hence change the relative proportions each frame occupies in their frames display. To prevent this, see the noresize attribute for the <frame> tag. See <frame>
Controlling frame borders and spacing
The popular browsers provide attribute extensions that you may use to generally define and change the borders surrounding the frames in a frameset. The HTML 4 and XHTML standards prefer instead that you include these border-related display features via <style> tag attributes.
Both Internet Explorer and Netscape accept the frameborder attribute to disable or explicitly enable frame borders. (By default, every frame in a frameset as well as the frameset window itself is rendered with a 3D border; see Figure 11-1.) The two browsers' documentation disagree about the particular values for the frameborder attribute, but both acknowledge the other's conventions. Hence, setting the value of frameborder to 0 or no turns borders off (see Figure 11-2); 1 or yes turns borders on.
Figure 11-2.
The frameborder attribute lets you remove the borders between frames
|
|
Internet Explorer and Netscape do disagree, however, as to how you may control the thickness of the borders. The latest version of Internet Explorer (Version 5) supports both the framespacing and border attributes, whose value is the number of pixels you want between frames (see Figure 11-3).
These attributes affect all frames and framesets nested within the current frameset as displayed by Internet Explorer. In practice, you should set it once on the outermost <frameset> to create a consistent border appearance for all of the frames in a single page.
Netscape accepts only the border attribute to define the border width, with an integer value in pixels. Like Internet Explorer, Netscape lets you include the frameborder attribute with any <frameset> tag, affecting all nested frames and framesets. Unlike Internet Explorer, Netscape lets you include the border attribute only in the outermost <frameset>, ensuring that all frame borders are the same width within that <frameset>.
Figure 11-3.
Internet Explorer takes the framespacing attribute to separate frames
|
|
Since browsers ignore unsupported attributes, it is possible to define frame borders so that both browsers do the right thing. Just make sure to use the same framespacing and border values.
Finally, both Netscape and the latest version of Internet Explorer (Version 5) let you control the color of the frame borders using the bordercolor attribute (Figure 11-4). It accepts a color name or hexadecimal triple as its value. A complete list of color names and values can be found in Appendix G, Color Names and Values.
Figure 11-4.
Netscape accepts border and bordercolor attributes to control the color and spacing between frames
|
|
Frames and JavaScript
Internet Explorer and Netscape, as standardized in HTML 4 and XHTML, support JavaScript-related event handlers that let your frame documents react when they are first loaded and when the frame window gets resized (onLoad); unloaded from the browser by the user (onUnload); when the window containing the frameset loses focus, such as when the user selects another window (onBlur); or when the frameset becomes the active window (onFocus). Included as <frameset> attributes, these event handlers take quote-enclosed lists of JavaScript commands and function calls as their value. For example, you might notify the user when all the contents have been loaded into their respective frames of a lengthy frameset:
<frameset onLoad="window.alert('Everything is loaded. You may now continue.')">
These four attributes may also be used with the <body> tag. We cover JavaScript event handlers in more detail in section .
Other <frameset> attributes
Like most of the other standard tags, the <frameset> tag honors four of the standard attributes: class, style, title, and id.
Use the class attribute to associate a predefined style class with this frame and, via style inheritance, its content. Alternatively, use the style attribute to define a style inline with the <frameset> tag. We cover styles more completely in Chapter 8, Cascading Style Sheets.
The id attribute creates a unique identifier for the frame, while title creates a title for the frame that might be presented to the user or used by a nonvisual browser.
Nesting <frameset> Tags
You can create some elaborate browser displays with a single <frameset>, but the frame layout is unimaginative. Instead, create staggered frames and other more complex layouts with multiple <frameset> tags nested within a top-level <frameset> in the frame document (Figure 11-5).
For example, create a layout of two columns, the first with two rows and the second with three rows, by nesting two <frameset> tags with row specifications within a top-level <frameset> that specifies the columns:
<frameset cols="50%,*">
<frameset rows="50%,*">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
<frameset rows ="33%,33%,*">
<frame src="frame3.html">
<frame src="frame4.html">
<frame src="frame5.html">
</frameset>
</frameset>
Figure 11-5.
Staggered frame layouts use nested <frameset> tags
|
|
Frame Contents
A frame document contains no displayable content, except perhaps a message for non-frame-enabled browsers. Instead, <frame> tags inside the one or more <frameset> tags (which encapsulate the contents of a frame document) provide URL references to the individual documents that are occupying each frame. See <noframes>
The <frame> Tag
The <frame> tag appears only within a <frameset>. Use it to set, via its associated src attribute, the URL of the document content that initially gets displayed inside the respective frame.
|
Function:
Define a single frame in a <frameset>
Attributes:
|
BORDERCOLOR |
NAME |
| CLASS |
NORESIZE |
| FRAMEBORDER |
SCROLLING |
| ID |
SRC |
| LONGDESC |
STYLE |
| MARGINHEIGHT |
TITLE |
| MARGINWIDTH |
End tag:
</frame>; rarely included in HTML
Contains:
Nothing
Used in:
frameset_content
|
Frames are placed into a frameset column by column, from left to right, and then row by row, from top to bottom, so the sequence and number of <frame> tags inside the <frameset> tag are important.
<frame>
The browser displays empty frames for <frame> tags that do not have a src attribute. It also displays empty frames if the <frameset> tag calls for more frames than the corresponding <frame> tags define. Such orphans remain empty; you cannot put content into them later, even if they have a target "name" for display redirection. See name attribute
The src attribute
The value of the src attribute for the <frame> tag is a URL of the document that is to be displayed in the frame. There is no other way to provide content for a frame. You shouldn't, for instance, include any <body> content within the frame document; the browser will ignore the frame tags and display just the contents of a <body> tag if it comes first, or vice versa.
The document referenced by the src attribute may be any valid document or any displayable object, including images and multimedia. In particular, the referenced document may itself be composed of one or more frames. The frames are displayed within the referencing frame, providing yet another way of achieving complex layouts using nested frames.
Since the source may be a complete document, all the features of HTML/XHTML apply within a frame, including backgrounds and colors, tables, fonts, and the like. Unfortunately, this also means that multiple frames in a single browser window may conflict with each other. Specifically, if each nested frame document (not a regular HTML or XHTML document) has a different <title> tag, the title of the overall browser window will be the title of the most recently loaded frame document. The easiest way to avoid this problem is to ensure that all related frame documents use the same title.
The name attribute
The optional name attribute for the <frame> tag labels that frame for later reference by the target attribute for the hypertext link anchor <a> tag and the <form> tag. This way, you can alter the contents of a frame using a link in another frame. Otherwise, like normal browser windows, hypertext-linked documents replace the contents of the source frame. We discuss names and targets at greater length later in this chapter. See target attribute
name attribute
The value of the name attribute is a text string enclosed in quotation marks.
The noresize attribute
Even though you may explicitly set frame dimensions with attributes in the <frameset> tag, users can manually alter the size of a column or row of frames. To suppress this behavior, add the noresize attribute to the frame tags in the row or column whose relative dimensions you do not want users fiddling with. For a two-by-two frame document, a noresize attribute in any one of the four associated frame tags will effectively freeze the relative proportions of all the frames, for example.
The noresize attribute is especially useful for frames that contain fixed images serving as advertisements, a button bar, or a logo. By fixing the size of the frame to contain just the image and setting the noresize attribute, you guarantee that the image will be displayed in the intended manner and that the remainder of the browser window will always be given over to the other frames in the document.
The scrolling attribute
The browser will display vertical and horizontal scrollbars with frames whose contents are larger than the allotted window space. If there is sufficient room for the content, the scrollbars disappear. The scrolling attribute for the <frame> tag gives you explicit control over whether the scroll bars appear or disappear.
With scrolling="yes", the browser adds scroll bars to the designated frame even if there is nothing to scroll. If you set the scrolling attribute value to no, scrollbars will never be added to the frame, even if the frame contents are larger than the frame itself. The value auto, supported only by Netscape, works as if you didn't include the scrolling attribute in the tag; Netscape adds scrollbars as needed. To achieve auto behavior in Internet Explorer, simply omit the scrolling attribute altogether.
The marginheight and marginwidth attributes
The browser normally places a small amount of space between the edge of a frame and its contents. You can change those margins with the marginheight and marginwidth attributes, each including a value for the exact number of pixels to place around the frame contents.
You cannot make a margin less than one pixel, or make it so large there is no room for the frame contents. That's because like most other HTML attributes, these advise: they do not dictate to the browser. If your desired margin values cannot be accommodated, the browser ignores them and renders the frame as best it can.
The frameborder and bordercolor attributes
You can add or remove borders from a single frame with the frameborder attribute. Values of yes or 1 and no or 0 respectively enable or disable borders for the frame and override the value of the frameborder attribute for any frameset containing the frame.
Note that the browsers do react somewhat differently to border specifications. Netscape, for instance, removes an individual border only if adjacent frames sharing that border have borders turned off. Internet Explorer, on the other hand, will remove those adjacent borders, but only if they are not explicitly turned on in those adjacent frames. Our advice is to explicitly control the borders for each frame if you want to consistently control the borders for all frames across both browsers.
With Netscape only, you also can change the color of the individual frame's borders with the bordercolor attribute. Use a color name or hexadecimal triple as its value. If two adjacent frames have different bordercolor attributes, the resulting border color is undefined. A complete list of color names and values can be found in Appendix G.
The title and longdesc attributes
Like most other standard tags, you can provide a title for a frame with the title attribute. The value of the attribute is a quote-enclosed string that describes the contents of the frame. Browsers might display the title, for instance, when the mouse passes over the frame.
If the title attribute isn't quite enough for you, the longdesc attribute can be used. Its value is the URL of a document that describes the frame. Presumably, this long description might be in some alternative media, suitable for use by a nonvisual browser.
The <noframes> Tag
A frame document has no <body>. It must not, since the browser will ignore any frame tags if it finds any <body> content before it encounters the first <frameset> tag. A frame document, therefore, is all but invisible to any non-frame-capable browser. The <noframes> tag gives some relief to the frame-disabled.
|
Function:
Supply content for non-frame-capable browsers
Attributes:
| CLASS |
ONKEYUP |
| DIR |
ONMOUSEDOWN |
| ID |
ONMOUSEMOVE |
| LANG |
ONMOUSEOUT |
| ONCLICK |
ONMOUSEOVER |
| ONDBLCLICK |
ONMOUSEUP |
| ONKEYDOWN |
STYLE |
| ONKEYPRESS |
TITLE |
End tag:
</noframes>; sometimes omitted in HTML
Contains:
body_content
Used in:
frameset_content
|
You should use the <noframes> tag only within the outermost <frameset> tag of a frame document. The content inside the <noframes> tag and its required end tag (</noframes>) is not displayed by any frame-capable browser, but is displayed in lieu of other contents in the frame document by browsers that do not handle frames. The contents of the <noframes> tag can be any normal body content, including the <body> tag itself.
Although this tag is optional, experienced authors typically include the <noframes> tag in their frame documents with content that warns a non-frame-capable browser user that they're missing the show. And smart authors will give those users a way out, if not direct access to the individual documents that make up the frame document contents. Remember our first frame example in this chapter? Figure 11-6 shows what happens when that frame document gets loaded into an old version of Mosaic.
Figure 11-6.
A <noframes> message in a non-frame-capable browser
|
|
<noframes>
Sorry, this document can be viewed only with a
frame-capable browser. Go to the <a href="frame1.html">
first HTML document</a> in the set.
</noframes>
The reason <noframes> works is that most browsers are extremely tolerant of erroneous tags and incorrect documents. A nonframe browser simply ignores the frame tags. What's left, then, is the content of the <noframes> tag, which the browser dutifully displays.
If your browser strictly enforces some version of HTML or XHTML that does not support frames, it may simply display an error message and refuse to display the document, even if it contains a <noframes> tag.
<noframes> Attributes
There are no attributes specific to the <noframes> tag, but you can use any of the sixteen standard attributes: class and style for style management, lang and dir for language type and display direction, title and id for titling and naming the enclosed content, and any of the event attributes for user-activated JavaScript processing within the <noframes> tag.
Inline Frames
To this point, our discussion has centered around frames that are defined as part of a frameset. A frameset, in turn, replaces the conventional <body> of a document and supplies content to the user via its contained frames.
The HTML 4 and XHTML standards let you do things a bit differently: you can also define a frame that exists within a conventional document, displayed as part of that document's text flow. These frames behave a lot like inline images, which is why they are known as inline frames.
All Internet Explorer Versions 4 and later, but only the latest version of Netscape Navigator (Version 6), support inline frames.
The <iframe> Tag
Define an inline frame with the <iframe> tag. The <iframe> tag is not used within a <frameset> tag. Instead, it appears anywhere in your document that an <img> tag might appear. The <iframe> tag defines a rectangular region within the document in which the browser displays a separate document, including scrollbars and borders.
|
Function:
Define an inline frame within a text flow
Attributes:
| ALIGN |
MARGINWIDTH |
| CLASS |
NAME |
| FRAMEBORDER |
SCROLLING |
| HEIGHT |
SRC |
| ID |
STYLE |
| LONGDESC |
TITLE |
| MARGINHEIGHT |
WIDTH |
End tag:
</iframe>; never omitted
Contains:
body_content
Used in:
text
|
Use the src attribute with <iframe> to specify the URL of the document that occupies the inline frame. All of the other, optional attributes for the <iframe> tag, including class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style, and title, behave exactly like the corresponding attributes for the <frame> tag. See <frame>
Use the content of the <iframe> tag to provide information to users of browsers that do not support inline frames. Compliant browsers will ignore these contents whereas all other browsers ignore the <iframe> tag and therefore display its contents as if it were regular body content. For instance, use the <iframe> content to explain to users what they are missing:
...other document content
<iframe src="sidebar.html" width=75 height=200 align=right>
Your browser does not support inline frames. To view this
<a href="sidebar.html">document</a> correctly, you'll need
a copy of Internet Explorer or the latest Netscape Navigator.
</iframe>
...subsequent document content
In this example, we let the user know that they were accessing an unsupported feature and provided a link to the missing content.
The align attribute
Like the align attribute for the <table> tag, this inline frame attribute lets you control where the frame gets placed inline with the adjacent text or moved to the edge of the document, allowing text to flow around the frame.
For inline alignment, use top, middle, or bottom as the value of this attribute. The frame will be aligned with the top, middle, or bottom of the adjacent text, respectively.
To allow text to flow around the inline frame, use the left or right values for this attribute. The frame will be moved to the left or right edge of the text flow, respectively, and the remaining content of the document will be flowed around the frame. A value of center places the inline frame in the middle of the display, with text flowing above and below.
The height and width attributes
Internet Explorer and Netscape 6 put the contents of an inline frame into a predefined, 150-pixel-tall, 300-pixel-wide box. Use the height and width attributes with values as the number of pixels to change those dimensions.
Using Inline Frames
Although you'll probably shy away from them for most of your web pages (at least until most browsers become fully standards-compliant), inline frames can be useful, particulary for providing information related to the current document being viewed, similar to the sidebar articles you find in a conventional printed publication.
Except for their location within conventional document content, inline frames are treated exactly like regular frames. You can load other documents into the inline frame using its name (see following section) and link to other documents from within the inline frame.
Named Frame or Window Targets
As we discussed in the <frame> tag description section, you can label a frame by adding the name attribute to its <frame> tag. The id attribute provides the same unique labeling. Once named or identified, the frame may become the destination display window for a hypertext-linked document selected within a document displayed in some other frame. You accomplish this redirection by adding the special target attribute to the anchor that references the document.
The target Attribute for the <a> Tag
If you include a target attribute within an <a> tag, the browser will load and display the document named in the tag's href attribute in a frame or window whose name matches the target. If the named or id'd frame or window doesn't exist, the browser will open a new window, give it the specified label, and load the new document into that window. Thereafter, hypertext-linked documents can target the new window.
target attribute
Targeted hypertext links make it easy to create effective navigational tools. A simple table of contents document, for example, might redirect documents into a separate window:
<h3>Table of Contents</h3>
<ul>
<li><a href="pref.html" target="view_window">Preface</a>
<li><a href="chap1.html" target="view_window">Chapter 1</a>
<li><a href="chap2.html" target="view_window">Chapter 2</a>
<li><a href="chap3.html" target="view_window">Chapter 3</a>
</ul>
The first time the user selects one of the table of contents hypertext links, the browser will open a new window, label it "view_window," and display the desired document's contents inside it. If the user selects another link from the table of contents and the "view_window" is still open, the browser will again load the selected document into that window, replacing the previous document.
Throughout the whole process, the window containing the table of contents is accessible to the user. By clicking on a link in one window, the user causes the contents of the other window to change.
Rather than open an entirely new browser window, a more common use of target is to direct hyperlink contents to one or more frames in a <frameset> display. You might place the table of contents into one frame of a two-frame document and use the adjacent frame for display of the selected documents:
<frameset cols="150,*">
<frame src="toc.html">
<frame src="pref.html" id="view_frame">
</frameset>
When the browser initially displays the two frames, the left frame contains the table of contents, and the right frame contains the preface (see Figure 11-7).
Figure 11-7.
Table of contents frame controls content of adjacent frame
|
|
When a user selects a link from the table of contents in the left frame (for example, Chapter 1), the browser loads and displays the associated document into the "view_frame" frame on the right side (Figure 11-8). As other links are selected, the right frame's contents change, while the left frame continuously makes the table of contents available to the user.
Figure 11-8.
The contents of Chapter 1 are displayed in the adjacent frame
|
|
Special Targets
There are four reserved target names for special document redirection actions:
_blank- The browser always loads a
target="_blank" linked document into a newly opened, unnamed window.
_self- This target value is the default for all
<a> tags that do not specify a target, causing the target document to be loaded and displayed in the same frame or window as the source document. This target is redundant and unnecessary unless used in combination with the target attribute in the <base> tag in a document's head (see section See The <base> Default Target).
_parent- The
_parent target causes the document to be loaded into the parent window or frameset containing the frame containing the hypertext reference. If the reference is in a window or top-level frame, then it is equivalent to the target _self.
- A brief example may help clarify how this link works. Consider a link in a frame that is part of a three-column frameset. This frameset, in turn, is a row in the top-level frameset being displayed in the browser window. This arrangement is shown in Figure 11-9.
- If no target is specified for the hypertext link, then it is loaded into the containing frame. If a target of
_parent is specified, the document is loaded into the area occupied by the three-column frameset containing the frame that contains the link.
_top- This target causes the document to be loaded into the window containing the hypertext link, replacing any frames currently displayed in the window.
- Continuing with the frame hierarchy, as shown in Figure 11-9, using a target of
_top would remove all the contained frames and load the document into the entire browser window.
Figure 11-9.
Using special hypertext targets in nested frames and framesets
|
|
All four of these target values begin with the underscore character. Any other window or target beginning with an underscore is ignored by the browser, so don't use the underscore as the first character of any frame name or id you define in your documents.
The <base> Default Target
It can be tedious to specify a target for every hypertext link in your documents, especially when most are targeted at the same window or frame. To alleviate this problem, you can add a target attribute to the <base> tag.
The target attribute in the <base> tag sets the default target for every hypertext link in the current document that does not contain an explicit target attribute. For example, in our example table of contents document, almost every link causes the document to be displayed in another window named "view_frame." Rather than include that target in each hypertext link, you should place the common target in the table of contents' <base> tag within its <head>:
<head>
<title>Table of Contents</title>
<base target="view_frame">
</head>
<body>
<h3>Table of Contents</h3>
<ul>
<li><a href="pref.html">Preface</a></li>
<li><a href="chap1.html">Chapter 1</a></li>
<li><a href="chap2.html" >Chapter 2</a></li>
<li><a href="chap3.html">Chapter 3</a></li>
</ul>
</body>
Notice that we don't include any other target references in the list of hyperlinks, because the browser will load and display all the respective documents in the base target "view_frame."
Traditional Link Behavior
Before the onset of frames, each time you selected a hyperlink, the corresponding document replaced the contents of the browser window. With frames, this behavior is modified so that the corresponding document replaces the content of the referencing frame. This is often not the desired behavior and can be disconcerting to people browsing your documents.
For example, suppose you have arranged all of the documents on your site to present themselves in three frames: a navigational frame at the top of the browser window, a scrolling content frame in the middle, and a feedback form at the bottom. You named the content frame with the name attribute of the <frame> tag in the top-level document for your collection and used the target attribute of the <base> tag in every document on your site to ensure that all links will be loaded into the center content frame.
This arrangement works perfectly for all the documents on your site, but what happens when a user selects a link that takes them to a different site? The referenced document will still be loaded into the center content frame. Now the user is confronted by a document from some other site, surrounded by your navigation and feedback frames! Very impolite.
The solution is to make sure that every hypertext link that references a remote document has a target of _top. This way, when someone selects a link that takes them away from your site, the remote document will replace the contents of the entire browser window, including your navigation and feedback frames. If the majority of the links in your documents are to other sites, you might consider adding target="_top" to a <base> tag in your document and using explicit target attributes in the links to your local documents.
