04 Frames
**********************************
* * *
* * *
* * *
* * *
* * *
* * *
* * *
* * *
* * *
**********************************
Two Frame Page
---------------------------
2 on right, 3 on left
********************************
* * *
* * *
* * *
* *******************
* * *
* * *
********************************
* * *
********************************
---------------------------
Example
The following example will use nested framesets to display
frames in approximately the following fashion:
+------------+-------------------------+------------+
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
+------------+------------+------------+------------+
| | |
| | |
| | |
| | |
| | |
| | |
+-------------------------+-------------------------+
The Frame Definition
HTML - Frames example
<BR> <A HREF="frame1.htm">Click here for frame1</A>
<BR> <A HREF="frame2.htm">Click here for frame2</A>
<BR> <A HREF="frame3.htm">Click here for frame3</A>
<BR> <A HREF="frame4.htm">Click here for frame4</A>
<BR> <A HREF="frame5.htm">Click here for frame5</A>
---------------------------
Frame
The frame tag appears inside the FRAMESET tag and specifies one frame in
the frameset. The attributes are:
SRC="URL"
The URL of the source document to be displayed in this frame. If the
frame does not specify a source it will be displayed as blank space.
NAME="window name"
Here "window name" is the name associated with this frame. It can be used
by the TARGET attribute in the A, BASE, AREA, and FORM tags to target
this frame.
MARGINWIDTH=number
Here number is the left and right margin thickness in pixels.
MARGINHEIGHT=number
Here number is the top and bottom margin thickness in pixels.
SCROLLING=type
Here type is one of yes, no or auto. It specifies if the frame is to have
a scroll bar: auto (the default) means the browser will decide.
NORESIZE
Stops the user from resizing the frame..
FRAMEBORDER=yes|no
Specifies if the border should be displayed.
FRAMESPACING=number
Here number is the spacing between frames in pixels.
ALIGN = "alignment" (one of LEFT, RIGHT, TOP, TEXTTOP, MIDDLE, ABSMIDDLE,
BASELINE, BOTTOM, or ABSBOTTOM.)
--------------------------
Creating a Frame
listFrame is top.frames[0]
contentFrame is top.frames[1]
navigateFrame is top.frames[2]
function reframe()
{
top.frames[0].location='inter.title.html';
top.frames[1].location='inter.toc.html';
top.frames[2].location='titlePage.html';
}
---------------
JavaScript and Frames, Escaping Frames
When you create a Web page, you expect the user to load it in
the browser's main window. You don't want it to be loaded in
another site's frame. By adding a cross-browser,
cross-platform script into the HEAD portion of your document,
you can ensure that the page loads in the entire window. Here's
the script:
The condition evaluates to true only if window is not equal to
top. In other words, if the page's direct window isn't the
topmost window in the browser, the condition evaluates to true.
top is the highest window object in the hierarchy. If the
topmost page doesn't feature any frames, the object model has
only one level of window objects, so top is equal to window.
However, if the browser is currently displaying a frame-based
document, each child frame has a corresponding window object.
Note that the following expressions would also function
properly:
window != parent
self != top
Back to the script. If the page's window isn't the topmost
window in the object model, your page is being displayed as a
frame in a frame-setting document. In order to escape the
frames, you need to set the URL of the upper window to the URL
of the current page:
if (window != top) top.location.href = location.href;