WD-frames-970331WD-frames-970331This draft is work under review by the W3C HTML Working Group, for potential incorporation in an upcoming version of the HTML specification, code named Cougar. Please remember this is subject to change at any time, and may be updated, replaced or obsoleted by other documents. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress".
A list of current W3C Working Drafts can be found at http://www.w3.org/pub/WWW/TR. This is work in progress and does not imply endorsement by, or the consensus of, either W3C or members of the HTML working group. Further information about Cougar is available at http://www.w3.org/pub/WWW/MarkUp/Cougar/.
Please send detailed comments to www-html-editor@w3.org. We cannot garantee a personal response, but summaries will be maintained off the Cougar page. Public discussion on HTML features takes place on www-html@w3.org. To subscribe send a message to www-html-request@w3.org with subscribe in the subject.
This document describes frame documents, the HTML syntax for frames, frame implementation notes, and includes a new proposal for extensions.
Frames are a way to describe a presentation by dividing the two-dimensional space of a display window (the browser, or user agent) into rectangular areas. Each frame has a name and can be named as the display area to be used for the other anchor of an A link (via the TARGET attribute of the A element type, which names the frame the object located by the src atribute should be presented in). In other words, frames let you define a set of regions on a screen, give them some initial content and then let you continue to use them for objects linked to.
This document also describes a proposal for a new element called IFRAME designed as a means to create compound documents by placing frames in HTML documents. Called "inline frames," this design technique allows authors to insert HTML documents the same way they insert images using the IMG element. This means authors can use the ALIGN attribute just as they do with IMG to align the frame with the surrounding text. An alternative based on OBJECT is also discussed.
Frames divide a browser window into two or more document windows, each displaying a different document, or a different part of the same document. Frames in an HTML document can cause a web page to appear to be divided into multiple, scrollable regions. For each frame, you can assign a name, a source document locator, dimensions, border alignment and decorations, scroll and resize behaviors, loading and unloading behavior, file and topic maps, and style sheets.
These properties make possible:
Frames in HTML documents are created and controlled through the structure of three element types: FRAMESET, FRAME and NOFRAMES.
A web page containing frames is created by a main or "framing" document. This document defines the frame regions on the user agent's page or window, and addresses the documents or objects that initially appear in the frames. Hypertext anchors within any frame can also target specific frames to place the contents of addressable documents and objects.
The structure of a frame-enabling HTML document type is similar to usual HTML structure. The key difference in an HTML document type is that the BODY container element is basically replaced by a FRAMESET container element. The initial FRAMESET element describes the frames that make up the page, and the FRAME elements specify the sub-documents that appear initially in each.
A FRAMESET may only contain nested FRAMESET and FRAME elements. When a FRAMESET element is nested within another FRAMESET element, it acts as a subframe. A BODY element can follow the FRAMESET to provide an alternative document for user agents that do not support frames. And a BODY element can contain NOFRAMES elements whose contents are not to be rendered by user agents which support frames.
A frame document contains a set of frames, each of which likely uses the BODY element. Elements that might normally be placed in the BODY element should not appear before the first FRAMESET element, or the FRAMESET will be ignored. The FRAMESET tag has a matching end tag.
Frame syntax is similar in scope and complexity to that used by tables, and has been designed to be quickly processed by Internet client layout engines.
<HTML>
<HEAD>
</HEAD>
<FRAMESET rows="33%,33%,33%">
<FRAMESET cols="50%,50%">
<FRAME name="frame1">
<FRAME name="frame2">
</FRAMESET>
<FRAME name="frame3">
<FRAME name="frame4">
</FRAMESET>
<BODY>
...contents to display in non-frame-capable user agent...
</BODY>
</HTML>
Try to remember the following basic frameset concepts:
A frameset divides the browser window into rectangular regions. Each such region can be:
For example, a frame set can contain a frame, plus another frame set containing two frames, resulting in three frames in all.
An HTML document that contains frames basically replaces the BODY element with the FRAMESET element.
The attributes of the FRAMESET element are COLS (columns) and ROWS. They determine how many frames the frame set is divided into. These attributes may be blank, or may consist of a list of one or more values separated by commas or spaces. Each such value determines the width (for columns) and height (for rows) of the regions; the number of width and height values supplied determines how many rows and columns, respectively, are created. The default for each is one. For example if you have:
<FRAMESET cols="20%,30%,50%">
in which there is no ROWS value, the frame set is divided vertically into three regions: the first region's width is 20% of the current frame set (or browser window if this frame set is at the top level), the second region's width is 30%, and the third region's width is 50%. When there is only one frame set in the document, these widths apply to the entire browser window. Similarly, when there is a ROWS value but no COLS value, the frame set is divided horizontally into regions. When values are supplied for both attributes, the frame set is divided into a grid of rows and columns.
The ROWS and COLS attributes take comma-separateds lists of values. These values can be absolute pixel values, percentage values between 1 and 100, or relative scaling values. The number of rows and columns is implicit in the number of values in the respective list. Since the total height of all the rows must equal the height of the window, row heights might be normalized to achieve this. If the rows (or cols) attribute values are unspecified, then the number of rows (or columns) is assumed to be one, and it may be arbitrarily sized to fit.
There are three ways to specify the width or height of a frame:
Example for 3 rows, the first and the last being smaller than the center row:
<FRAMESET rows="20%,60%,20%">
Example for 3 rows, the first and the last being fixed height, with the remaining space assigned to the middle row:
<FRAMESET rows="100,*,100">
A `relative size' is specified with an asterisk, e.g., `1*', `2*', `3*' (`1*' can also be written simply as `*'). This is interpreted as follows: after all widths (or heights) specified as percentages or absolute amounts have been allocated to the corresponding frames, the remaining space is allocated to frames whose widths (or heights) have been specified as a relative size. The amount of space allocated to a frame is proportional to the number in front of the asterisk. For example:
<FRAMESET rows="30%,400,*,2*"> <FRAME ... > <FRAME ... > <FRAME ... > <FRAME ... > </FRAMESET>
Suppose the browser window is currently 1000 pixels high. The first frame gets 30% of the total height, that is, 300 pixels; the second frame gets 400 pixels, since an absolute amount was specified. This leaves 300 pixels to be divided between the other two frames. The fourth frame's height is specified as `2*', so it is twice as high as the third frame, whose height is only `*' (1*). Therefore the third frame is 100 pixels high and the fourth is 200 pixels high.
The FRAME element defines a single frame in a frameset. It has 7 possible attributes: SRC, NAME, FRAMEBORDER, MARGINWIDTH, MARGINHEIGHT, SCROLLING, and NORESIZE. The FRAME tag is not a container so it has no matching end tag.
The attributes of the FRAME element type are as follows:
This small document causes three frames to be displayed. The first (outer) FRAMESET element divides the browser window into two horizontal regions. The upper region contains a single frame displaying the document http://www.zenith.com/, and the lower region displays the frames defined in the second (inner) FRAMESET element. This FRAMESET divides the lower part of the window into two vertical frames, displaying the documents http://www.sinister.org/ and http://www.dexter.org/.
<HTML> <FRAMESET rows="40%,60%"> <FRAME src="http://www.zenith.com/"> <FRAMESET cols="50%,50%"> <FRAME src="http://www.sinister.org/"> <FRAME src="http://www.dexter.org/"> </FRAMESET> </FRAMESET> </HTML>
The ONLOAD and ONUNLOAD attributes on FRAMESET are bound to Intrinsic Events. They allow authors to provide scriptlets to be executed when these events occured giving them more control over the user agent behavior. This however requires that the user agent supports scripting, see HTML Scripts for further details.
This feature gives a document author or designer a degree of control over which frame a document or object will appear in when a user clicks on an anchor or othewise traverses a link in a frame document.
This technique is useful as a standalone feature for a document space that is best viewed with multiple top-level windows (e.g., a list of subjects window, and a window displaying the current subject), but it is most useful in conjunction with frames.
Previously when a user clicked on an anchor, the inbound document either appeared in the window the user had clicked in, or alternately (and under the user's control) appeared in a completely new window. Targeting windows for delivery allows the document writer to assign names to specific windows, and target certain documents to always appear in the window bearing the matching name.
A name is assigned to a window in one of three ways:
Window-target: window_nameThis forces the document to load in the window named window_name or if such a window doesn't exist, one is created and the document is loaded in it.
Targeting a frame with HTML is accomplished by means of the TARGET attribute. This attribute can be added to a variety of HTML elements to target a specific frame for links reresented by that element. The attribute takes the following form:
target="window_name"
By default, any anchor in a frame will load a document into that same frame.
NAME is an attribute of the FRAME element. By naming a frame, its contents can be changed with the use of a target attribute in your anchor elements, or in the BASE element of a document referred to in an anchor. By referring to a particular frame with the TARGET element, you control which frame will display the document.
The basic rules are as follows:
Note:User agents may provide a way to override the TARGET attribute.
The anchor tag normally specifies a document to be loaded when the link is traversed; adding the TARGET attribute to these elements forces the document to be loaded into the targeted window. The A and LINK anchor elements can specify that a linked document should be displayed in a specifically named frame. Therefore any frame that the page designer chooses to be a delivery target must be given a name. The name of the frame is the value of the NAME attribute of the corresponding FRAME element. The value of the TARGET attribute of the A or LINK anchor element must be the name of the desired frame.
Here is an example of targeting specific frames using an anchor element.
<FRAMESET rows="45%,10%,45%">
<FRAME name="upper">
<FRAME name="middle" src="sources.htm">
<FRAME name="lower">
</FRAMESET>
<!-- In the document "sources.htm" -->
<UL>
<LI><A target="upper" href="http://www.sgmlopen.org/">
SGML Open Home Page</A></LI>
<LI><A target="lower" href="http://www.w3.org/">
W3 Consortium Home Page</A></LI>
</UL>
Clicking on the first anchor will cause the document http://www.sgmlopen.org/ to be displayed in the frame named "upper"; clicking on the second anchor will cause the document http://www.w3.org/ to be displayed in the frame named "lower".
Attaching the TARGET attribute to the LINK element is not widely supported, except by SoftQuad Panorama PRO 2.0.
This option causes all (or most) of the links in a document to be targeted to the same window. In this case the TARGET attribute establishes a default window_name that all links in this document are targeted to. This default is of course overridden by specific instances of the TARGET attribute in individual anchor elements. Example:
<BASE target="window_name">
The IETF Internet-Draft of Client-Side Image Maps defines an area element type. It describes a shaped area in a client-side image map, and represents a link to traverse when the user clicks on it. Adding the TARGET attribute to AREA forces the linked document to load in the targeted window. Example:
<AREA SHAPE="shape" COORDS="x,y,..." HREF="url" target="window_name">
The FORM element normally displays the results of a form submission in the same window the form was submitted from. By adding a TARGET attribute to FORM, the result of the form submission is loaded into the targeted window. Example:
<FORM ACTION="url" target="window_name">
The window name specified by a TARGET attribute must begin with an alphabetic character or an underscore character in case of a special name listed below. All other window names are ignored.
The recognized special target names are:
Content providers can create an alternative content viewable by non-frame-capable clients and clients set not to use frames. Since some browsers do not support frames, a document that uses frames should always supply an alternate document that these browsers can read. This is achieved by having a BODY element following the outermost FRAMSET element. This BODY element and its content is ignored by frame-capable web clients (unless they are set not to perform a frame based display).
In addition frame-capable browsers ignore all tags and data contain in a NOFRAMES element. Thanks to this element you can include in a document some data which is only displayed by non-frame browsers. Typically this is data that is otherwise displayed in another frame.
This example shows the HTML source to achieve the layout below using frames.
+----------------------------------------------------------+ | | | | | | | | | | | | | | | | | | | | | | | | | | | | |-----------------------------+ | | | | | | | | | | | | +----------------------------| | | | | | | | | | | | | | | |-----------------------------+ | | | | | | | | | | | | | | | | | | | | | | | | | | | +----------------------------------------------------------+
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME src="cell.html">
<FRAME src="cell.html">
</FRAMESET>
<FRAMESET>
<FRAME src="cell.html">
<FRAME src="cell.html">
<FRAME src="cell.html">
</FRAMESET>
</FRAMESET>
<BODY>
<H1>Frame Alert!</H1>
<P>
This document is designed to be viewed using the
frames feature. If you see this message, you are
using a non-frame-capable web client.
</P>
</BODY>
The main layout in two columns is obtained by nesting two framesets inside the topmost frameset. The sub framesets then respectively contain two and three frames. At the end a BODY element is used to provide an alternate document for non frame based renderings.
In the following example the NOFRAMES element is used to include in a document a table of contents which is otherwise displayed in a separate frame.
<BODY>
<H1>The Different Fish Species</H1>
<NOFRAMES> <!-- TOC for no frames display -->
<UL>
<LI><a href=#sec1>The fresh and sea water species</a>
<LI><a href=#sec2>A subjective comparison</a>
</UL>
</NOFRAMES>
<H1><a name=sec1>The fresh and sea water species</a></H1>
Fishes can be classified into several categories starting by the type of
water in which they live.
...
<H1><a name=sec2>A subjective comparison</a></H1>
This section is clearly not objective. I much prefer sea water fishes
which are generally speaking more colorful and therefore more beautiful.
...
</BODY>
These are some issues with implementing grids, and suggested solutions.
FRAMESET tags can be nested, as per the Frame Syntax description. But such a structure is basically flattened before display on the screen.
Of more importance is whether a FRAME can contain a document which is itself a FRAMESET. The answer is yes, but FRAMESETs must be nestable, especially with named frames, so that a link in one frame can reload multiple other frames.
It is possible to design a FRAMESET that recurses infinitely, stacking the same FRAMESET inside itself until a machine runs out of memory. Consider this example:
<FRAMESET rows="50%,50%"> <FRAME src="parent_url"> <FRAME> </FRAMESET>
Infinite recursion is prevented. Any frame that attempts to assign as its SRC a URL used by any of its ancestors is treated as if it has no SRC URL at all (basically a blank frame). This doesn't prevent all malicious documents, but it eliminates a troublesome class of them.
The IFRAME element is very similar to the FRAME element but is designed to be used in a BODY element instead of a FRAMESET. It defines a frame which takes place in the document flow, the way images inserted with the IMG element do. IFRAME is a text level element, it does not cause a paragraph break. Just like a FRAME, an IFRAME can be targeted, and navigated independent of the parent document.
The IFRAME element is a container. The end-tag is required. The contents are ignored by user agents that support IFRAME allowing alternative content to be supplied to down-level browsers.
Most attributes of the FRAME element are attributes of IFRAME. These are SRC, NAME, FRAMEBORDER, MARGINWIDTH, MARGINHEIGHT, SCROLLING. But IFRAME does not have the attribute NORESIZE; an inline frame is not resizable. And it has the additional attribute ALIGN which has the same value and meaning as the one of the IMG element.
<BODY> <P>This document contains an inline frame here <IFRAME src="foo.html" width=400 height=500> that unfortunately your user agent doesn't support. Alternatively you can get the related document <a href="foo.html">here</a>.</IFRAME> That's all folks! </BODY>
The following example shows how targets can be used with an inline frame.
<BODY>
<P>This document contains an inline frame
<IFRAME name="iframe" width=400 height=500></IFRAME>
in which you can choose to see various documents. These are:
<UL>
<LI><A target="iframe" href="http://www.sgmlopen.org/">
SGML Open Home Page</A></LI>
<LI><A target="iframe" href="http://www.w3.org/">
W3 Consortium Home Page</A></LI>
</UL>
</BODY>
Clicking on the first anchor will cause the document http://www.sgmlopen.org/ to be displayed in the inline frame, named "iframe"; clicking on the second anchor will cause the document http://www.w3.org/ to be displayed in this same frame.
Although a means for creating compound documents is recognized to be a real need the introduction of IFRAME to meet this need is arguable. The main reason is that compound documents can already be created using the existing OBJECT element. Indeed, the purpose of IFRAME is to provide authors with a way to insert HTML documents into an HTML document. At the same time the OBJECT element is designed to provide a general mechanism to insert any type of object into an HTML document. Based on this and given that an HTML document is only a particular type of object, it is reasonable to claim that IFRAME is not necessary, and that OBJECT should be used instead.
This section discusses this issue, providing various elements of comparison and what it would take to allow authors to actually use OBJECT instead of IFRAME.
Both elements allow you to insert an HTML document. Both of them are textlevel elements and do not cause a paragraph break. They are both containers supporting downlevel browsers in the same way; their contents are not rendered by user agents which support the element. So these elements are completely equivalent in these regards.
The IFRAME element, as defined in this document, is however different from the OBJECT element since it provides a set of attributes which are not available on OBJECT. These attributes are: SRC, FRAMEBORDER, MARGINWIDTH, MARGINHEIGHT and SCROLLING. To which we must add the NAME attribute which is available on both elements but has a different meaning.
The DATA attribute of OBJECT is equivalent to SRC and can be used in the same way.
The FRAMEBORDER, MARGINWIDTH and MARGINHEIGHT have no equivalent on OBJECT. Using OBJECT these have to be specified through the style sheet or alternatively via a set of PARAM elements.
SCROLLING has no equivalent on OBJECT and needs to be specified via a PARAM element.
Based on this, the basic example:
<IFRAME src="foo.html" width=400 height=500> that unfortunately your user agent doesn't support. Alternatively you can get the related document <a href="foo.html">here</a>. </IFRAME>Becomes:
<OBJECT data="foo.html" width=400 height=500> that unfortunately your user agent doesn't support. Alternatively you can get the related document <a href="foo.html">here</a>. </OBJECT>
And the more complex example:
<IFRAME src="foo.html" width=400 height=500 scrolling=auto
frameborder=1>
that unfortunately your user agent doesn't support. Alternatively you
can get the related document <a href="foo.html">here</a>.
</IFRAME>
Becomes:
<OBJECT src="foo.html" width=400 height=500> <PARAME name=scrolling value=auto> <PARAME name=frameborder value=1> that unfortunately your user agent doesn't support. Alternatively you can get the related document <a href="foo.html">here</a>. </OBJECT>
The last difference is that IFRAME can be given a name, via its NAME attribute, so that it can be used as a link target as shown below.
<BODY>
<P>This document contains an inline frame
<IFRAME name="iframe" width=400 height=500></IFRAME>
in which you can choose to see various documents. These are:
<UL>
<LI><A target="iframe" href="http://www.sgmlopen.org/">
SGML Open Home Page</A></LI>
<LI><A target="iframe" href="http://www.w3.org/">
W3 Consortium Home Page</A></LI>
</UL>
</BODY>
The NAME attribute on OBJECT has a specific semantic and cannot be used for that purpose. Therefore, to specify a target name on an OBJECT the ID attribute has to be used instead. This leads to the following:
<BODY>
<P>This document contains an inline frame
<OBJECT id="iframe" width=400 height=500></OBJECT>
in which you can choose to see various documents. These are:
<UL>
<LI><A target="iframe" href="http://www.sgmlopen.org/">
SGML Open Home Page</A></LI>
<LI><A target="iframe" href="http://www.w3.org/">
W3 Consortium Home Page</A></LI>
</UL>
</BODY>
This is no big deal but it has a disadvantage though. The way authors specify target names on OBJECT and FRAME (ID vs NAME) becomes inconsistent. One way to solve this, is to deprecate the NAME attribute on FRAME and specify that ID should be used uniformly.
The following declarations define the proposed HTML frames support.
<!ELEMENT FRAMESET - - (FRAMESET|FRAME)+> <!ATTLIST FRAMESET -- absolute pixel values, percentages or relative scales. -- rows CDATA #IMPLIED -- if not given, default is 1 row -- cols CDATA #IMPLIED -- if not given, default is 1 column -- onLoad CDATA #IMPLIED -- intrinsic event -- onUnload CDATA #IMPLIED -- intrinsic event -- > <!-- reserved frame names start with "_" otherwise starts with letter --> <!ELEMENT FRAME - O EMPTY> <!ATTLIST FRAME name CDATA #IMPLIED -- name of frame for targetting -- src %URL #IMPLIED -- source of frame content -- frameborder (1|0) 1 -- request frame separators? -- marginwidth %Pixels #IMPLIED -- margin widths in pixels -- marginheight %Pixels #IMPLIED -- margin height in pixels -- noresize (noresize) #IMPLIED -- allow users to resize frames? -- scrolling (yes|no|auto) auto -- scrollbar or none -- > <!ELEMENT IFRAME - - %body.content> <!ATTLIST IFRAME name CDATA #IMPLIED -- name of frame for targetting -- src %URL #IMPLIED -- source of frame content -- frameborder (1|0) 1 -- request frame borders? -- marginwidth %Pixels #IMPLIED -- margin widths in pixels -- marginheight %Pixels #IMPLIED -- margin height in pixels -- scrolling (yes|no|auto) auto -- scrollbar or none -- align %IAlign #IMPLIED -- vertical or horizontal alignment -- > <!ELEMENT NOFRAMES - - %body.content>
Because frames were deployed in various products before it was properly specified as part of HTML several features are available in some products but are not standard. Here are some of them:
These attributes are limited to presentation properties and can better be specified using a style sheet.