The Web Design Group

Web Authoring FAQ: HTML Frames


English - Nederlands - Français
Table of Contents - Entire FAQ (HTML) - Entire FAQ (Text)
Previous Section - Next Section

This document answers questions asked frequently by web authors. While its focus is on HTML-related questions, this FAQ also answers some questions related to CSS, HTTP, JavaScript, server configuration, etc.

This document is maintained by Darin McGrew <darin@htmlhelp.com> of the Web Design Group, and is posted regularly to the newsgroup comp.infosystems.www.authoring.html. It was last updated on April 26, 2007.

Section 11: HTML Frames

  1. How do I create frames? What is a frameset?
  2. How do I make a link or form in one frame update another frame?
  3. Why do my links open new windows rather than update an existing frame?
  4. How do I update two frames at once?
  5. How do I get out of a frameset?
  6. How do I make sure my framed documents are displayed inside their frameset?
  7. Is there a way to prevent getting framed?
  8. How do I specify a specific combination of frames instead of the default document?
  9. How do I remove the border around frames?
  10. How do I make a frame with a vertical scrollbar but without a horizontal scrollbar?
  11. How do I change the title of a framed document?
  12. Why aren't my frames the exact size I specified?
  13. Are there any problems with using frames?
  14. Do search engines dislike frames?

11.1. How do I create frames? What is a frameset?

Frames allow an author to divide a browser window into multiple (rectangular) regions. Multiple documents can be displayed in a single window, each within its own frame. Graphical browsers allow these frames to be scrolled independently of each other, and links can update the document displayed in one frame without affecting the others.

You can't just "add frames" to an existing document. Rather, you must create a frameset document that defines a particular combination of frames, and then display your content documents inside those frames. The frameset document should also include alternative non-framed content in a NOFRAMES element.

The HTML 4 frames model has significant design flaws that cause usability problems for web users. Frames should be used only with great care.

See also

11.2. How do I make a link or form in one frame update another frame?

In the frameset document (the HTML document containing the <frameset> <frame> tags), make sure to name the individual frames using the NAME attribute. The following example creates a top frame named "navigation" and a bottom frame named "content":

<frameset rows="*,3*">
    <frame name="navigation" src="navigation.html">
    <frame name="content" src="content.html">
    <noframes><body>
        <!-- Alternative non-framed version -->
    </body></noframes>
</frameset>

Then, in the document with the link, use the TARGET attribute to specify which frame should be used to display the link. (The value of the TARGET attribute should match the value of the target frame's NAME attribute.) For example:

<a target="content" href=...>

To target a form submission, use the TARGET attribute of the FORM element, like this:

<form target="content" action=...>

Note that when forms are processed entirely by JavaScript, the target frame must be specified in the JavaScript. The value of the TARGET attribute is irrelevant.

Normally, the default target frame is the current frame ("_self"). To change the default target for every link/form on the page, use the TARGET attribute of the BASE element, like this:

<base target="content">

11.3. Why do my links open new windows rather than update an existing frame?

If there is no existing frame with the name you used for the TARGET attribute, then a new browser window will be opened, and this window will be assigned the name you used. Furthermore, TARGET="_blank" will open a new, unnamed browser window.

In HTML 4, the TARGET attribute value is case-insensitive, so that abc and ABC both refer to the same frame/window, and _top and _TOP both have the same meaning. However, most browsers treat the TARGET attribute value as case-sensitive and do not recognize ABC as being the same as abc, or _TOP as having the special meaning of _top.

Also, some browsers include a security feature that prevents documents from being hijacked by third-party framesets. In these browsers, if a document's link targets a frame defined by a frameset document that is located on a different server than the document itself, then the link opens in a new window instead.

11.4. How do I update two frames at once?

There are two basic techniques for updating multiple frames with a single link: The HTML-based technique links to a new frameset document that specifies the new combination of frames. The JavaScript-based solution uses the onClick attribute of the link to update the additional frame (or frames).

The HTML-based technique can link to a new frameset document with the TARGET="_top" attribute (replacing the entire frameset). However, there is an alternative if the frames to be updated are part of a nested frameset. In the initial frameset document, use a secondary frameset document to define the nested frameset. For example:

<frameset cols="*,3*">
    <frame src="contents.html" name="Contents">
    <frame src="frameset2.html" name="Display">
    <noframes><body>
        <!-- Alternative non-framed version -->
    </body></noframes>
</frameset>

A link can now use the TARGET="Display" attribute to replace simultaneously all the frames defined by the frameset2.html document.

The JavaScript-based solution uses the onClick attribute of the link to perform the secondary update. For example:

<a href="URL1" target="Frame1" onClick="top.Frame2.location='URL2';">Update frames</a>

The link will update Frame1 with URL1 normally. If the reader's browser supports JavaScript (and has it enabled), then Frame2 will also be updated (with URL2).

11.5. How do I get out of a frameset?

If you are the author, this is easy. You only have to add the TARGET attribute to the link that takes readers to the intended 'outside' document. Give it the value of _top.

In many current browsers, it is not possible to display a frame in the full browser window, at least not very easily. The reader would need to copy the URL of the desired frame and then request that URL manually.

I would recommend that authors who want to offer readers this option add a link to the document itself in the document, with the TARGET attribute set to _top so the document displays in the full window if the link is followed.

11.6. How do I make sure my framed documents are displayed inside their frameset?

When the sub-documents of a frameset state are accessed directly, they appear without the context of the surrounding frameset.

If the reader's browser has JavaScript support enabled, the following script will restore the frameset:

<SCRIPT TYPE="text/javascript">
if (parent.location.href == self.location.href) {
    if (window.location.href.replace)
        window.location.replace('frameset.html');
    else
        // causes problems with back button, but works
        window.location.href = 'frameset.html';
}
</SCRIPT>

A more universal approach is a "restore frames" link:

<A HREF="frameset.html" TARGET="_top">Restore Frames</A>

Note that in either case, you must have a separate frameset document for every content document. If you link to the default frameset document, then your reader will get the default content document, rather than the content document he/she was trying to access. These frameset documents should be generated automatically, to avoid the tedium and inaccuracy of creating them by hand.

Note that you can work around the problem with bookmarking frameset states by linking to these separate frameset documents using TARGET="_top", rather than linking to the individual content documents.

11.7. Is there a way to prevent getting framed?

"Getting framed" refers to having your documents displayed within someone else's frameset without your permission. This can happen accidentally (the frameset author forgot to use TARGET="_top" when linking to your document) or intentionally (the frameset author wanted to display your content with his/her own navigation or banner frames).

To avoid "framing" other people's documents, you must add TARGET="_top" to all links that lead to documents outside your intended scope.

Unfortunately, there is no reliable way to specify that a particular document should be displayed in the full browser window, rather than in the current frame. One workaround is to use <BASE TARGET="_top"> in the document, but this only specifies the default target frame for links in the current document, not for the document itself.

If the reader's browser has JavaScript enabled, the following script will automatically remove any existing framesets:

<script type="text/javascript">
if (top.frames.length!=0) {
    if (window.location.href.replace)
        top.location.replace(self.location.href);
    else
        top.location.href=self.document.href;
}
</script>

An alternative script is

<script type="text/javascript">
function breakOut() {
    if (self != top)
        window.open("my URL","_top","");
}
</script>
</HEAD>
<BODY onLoad="breakOut()">

11.8. How do I specify a specific combination of frames instead of the default document?

This is unfortunately not possible. When you navigate through a site using frames, the URL will not change as the documents in the individual frames change. This means that there is no way to indicate the combination of documents that make up the current state of the frameset.

The author can provide multiple frameset documents, one for each combination of frame content. These frameset documents can be generated automatically, perhaps being created on the fly by a CGI program. Rather than linking to individual content documents, the author can link to these separate frameset documents using TARGET="_top". Thus, the URL of the current frameset document will always specify the combination of frames being displayed, which allows links, bookmarks, etc. to function normally.

11.9. How do I remove the border around frames?

Removing the border around frames involves both not drawing the frame borders and eliminating the space between the frames. The most widely supported way to display borderless frames is <FRAMESET ... BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>.

Note that these attributes are proprietary and not part of the HTML 4.01 specifications. (HTML 4.01 does define the FRAMEBORDER attribute for the FRAME element, but not for the FRAMESET element.) Also, removing the border around a frame makes it difficult to resize it, as this border is also used in most GUIs to change the size of the frame.

11.10. How do I make a frame with a vertical scrollbar but without a horizontal scrollbar?

The only way to have a frame with a vertical scrollbar but without a horizontal scrollbar is to define the frame with SCROLLING="auto" (the default), and to have content that does not require horizontal scrolling. There is no way to specify that a frame should have one scrollbar but not the other. Using SCROLLING="yes" will force scrollbars in both directions (even when they aren't needed), and using SCROLLING="no" will inhibit all scrollbars (even when scrolling is necessary to access the frame's content). There are no other values for the SCROLLING attribute.

11.11. How do I change the title of a framed document?

The title displayed is the title of the frameset document rather than the titles of any of the pages within frames. To change the title displayed, link to a new frameset document using TARGET="_top" (replacing the entire frameset).

11.12. Why aren't my frames the exact size I specified?

Older versions of Netscape Navigator seems to convert pixel-based frame dimensions to whole percentages, and to use those percentage-based dimensions when laying out the frames. Thus, frames with pixel-based dimensions will be rendered with a slightly different size than that specified in the frameset document. The rounding error will vary depending on the exact size of the browser window.

Furthermore, Navigator seems to store the percentage-based dimensions internally, rather than the original pixel-based dimensions. Thus, when a window is resized, the frames are redrawn based on the new window size and the old percentage-based dimensions.

There is no way to prevent this behavior. To accomodate it, you should design your site to adapt to variations in the frame dimensions. This is another situation where it is a good idea to accomodate variations in the browser's presentation.

11.13. Are there any problems with using frames?

The fundamental problem with the design of frames is that framesets create states in the browser that are not addressable. Once any of the frames within a frameset changes from its default content, there is no longer a way to address the current state of the frameset. It is difficult to bookmark - and impossible to link or index - such a frameset state. It is impossible to reference such a frameset state in other media. When the sub-documents of such a frameset state are accessed directly, they appear without the context of the surrounding frameset. Basic browser functions (e.g., printing, moving forwards/backwards in the browser's history) behave differently with framesets. Also, browsers cannot identify which frame should have focus, which affects scrolling, searching, and the use of keyboard shortcuts in general.

Furthermore, frames focus on layout rather than on information structure, and many authors of framed sites neglect to provide useful alternative content in the NOFRAMES element. Both of these factors cause accessibility problems for browsers that differ significantly from the author's expectations and for search engines.

See also

11.14. Do search engines dislike frames?

Search engines can link directly to framed content documents, but they cannot link to the combinations of frames for which those content documents were designed. This is the result of a fundamental flaw in the design of frames.

Search engines try to provide their users with links to useful documents. Many framed content documents are difficult to use when accessed directly (outside their intended frameset), so there is little benefit if search engines offer links to them. Therefore, many search engines ignore frames completely and go about indexing more useful (non-framed) documents.

Search engines will index your <NOFRAMES> content, and any content that is accessible via your <NOFRAMES> content. Such content should be useful when accessed directly from a search-engine link.

See also

Table of Contents - Entire FAQ (HTML) - Entire FAQ (Text)
Previous Section - Next Section