Understanding Frames

Frames

Frames allow you to divide the page into several rectangular areas and to display a separate document in each rectangle. Each of those rectangles is called a "frame".

Here is an example

<FRAMESET ROWS="75%, *" COLS="*, 40%">
<FRAME SRC="framea.html">
<FRAME SRC="frameb.html">
<FRAME SRC="framec.html">
<FRAME SRC="framed.html">
<NOFRAMES>
<H1>No Frames? No Problem!</H1>
Take a look at our
<A HREF="noframes.html">no-frames</A>
version.
</NOFRAMES>
</FRAMESET>

<FRAMESET ...> is used instead of the <BODY ...> tag. The frameset file has no content which appears on the page, so it has no need for <BODY ...>, which designates the content of the page. In fact, if you use <BODY ...> (except inside <NOFRAMES>), the frames will not appear. Tags in <HEAD>, including <TITLE>, still have their intended effects.
Rows and columns are described by a list of widths or heights. For example COLS="25%, *, 40%" says that there will be three columns. The first column takes up 25% of the width of the page, the third column takes up 40% of the width of the page, and the asterisk ("*") means "whatever is left over". See COLS and ROWS for more details.

Nested Frames

<FRAMESET ROWS="15%,*">
<FRAME SRC="titlebar.html" NAME=TITLE SCROLLING=NO>
<FRAMESET COLS="20%,*">
<FRAME SRC="sidebar.html" NAME=SIDEBAR>
<FRAME SRC="menu.html" NAME=RECIPES>
</FRAMESET>
<NOFRAMES>
No frames? No Problem! Take a look at our
<A HREF="menu.html">no-frames</A> version.
</NOFRAMES>
</FRAMESET>

Targeting Frames Each frame is given a name using <FRAME NAME="...">. These names uniquely identify each frame. Using these names, links in other frames can tell the browser which frames the link targets.

<FRAMESET COLS="20%,*">
<FRAME SRC="sidebar.html" NAME=SIDEBAR>
<FRAME SRC="main.html" NAME=MAIN>
</FRAMESET>

To target one of these frames, the link should have a TARGET attribute set to the name of the frame where the linked page should appear. So, for example, this code creates a link to tfetacos.html and targets that link to the MAIN frame:

<A HREF="tfetacos.html" TARGET=MAIN>my link</A>

Targeting the whole window

Eventually, in a framed site, you want to "break out"... link to a page and have that page take over the entire window. To create this sort of link, we add target="_blank" to the <A ...> tag:

<A HREF="wwtarget.html" target="_blank">

"_top" is a reserved name which is automatically given to the entire window

No Frames

Browsers that know frames will ignore everything between <NOFRAMES> and </NOFRAMES>. Browsers that don't understand frames will also not understand (and therefore ignore) <NOFRAMES> and display the content

To create a borderless frameset, use a <FRAMESET ...> tag with FRAMEBORDER, FRAMESPACING, and BORDER attributes like this:

<FRAMESET ROWS="20%,*" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>

Restrict our page from iframe

If you don't want your page to be framed, put this little Javascript in the page:

<SCRIPT TYPE="text/javascript">
<!--
if (top != self)
top.location=self.document.location;
//-->
</SCRIPT>

This script checks to see if the current page is the "top" page. If it is not, it tells the web browser to load the current web page as the top, thus wiping out any frames.

Always our page to be framed

Sometimes a particular web page only makes sense if it appears in a frame.

<SCRIPT TYPE="text/javascript">
<!--
function checkframed(url)
{
if (top == self)
document.write(
'<DIV STYLE="padding:8pt;' +
'border-style:solid;border-width:8pt;' +
'border-color:66CC33;">' +
'<STRONG>' +
'This page is intended as part of a ' +
'<A HREF="' + url + '">framed document</A>.' +
'</STRONG></DIV>');
}
checkframed("dgftop.html");
//-->
</SCRIPT>

FRAME Attributes

FRAMEBORDER = YES | 1 | NO | 0
FRAMESPACING = integer
BORDER = integer
COLS = integer
ROWS = integer
BORDERCOLOR = color expression
SRC = "URL"
NAME = "text string"
SCROLLING = YES | NO | AUTO
NORESIZE says that the user cannot make the frame bigger or smaller by sliding the borders
FRAMEBORDER = YES | 1 | NO | 0