JavaScript and Frames, Part I: A Live Example - www.docjavascript.com | WebReference

JavaScript and Frames, Part I: A Live Example - www.docjavascript.com


JavaScript and Frames, Part I (6)

A Live Example

Our live example shows several ways to navigate through and manipulate frames. The top level file consists of two columns:

<HTML>
<HEAD>
<TITLE> separate file nesting </TITLE>
</HEAD>
<FRAMESET COLS="60%, *" FRAMEBORDER="yes">
  <FRAME SRC="left.html" NAME="left">
  <FRAME SRC="right.html" NAME="right">
</FRAMESET>
</HTML>

The left column initially includes three images:

<HEAD>
<TITLE> left file </TITLE>
</HEAD>
<BODY>
<A HREF="../index.html"><IMG SRC="docjsad.gif"></A><BR><BR><BR><BR>
<A HREF="../index.html"><IMG SRC="docjsad.gif"></A><BR><BR><BR><BR>
<A HREF="../index.html"><IMG SRC="docjsad.gif"></A>
</BODY>
</HTML>

The right column is a frame set with two frames:

<HTML>
<HEAD>
<TITLE> right file </TITLE>
</HEAD>
<FRAMESET ROWS="70%,*">
  <FRAME SRC="topright.html" NAME="topRight">
  <FRAME SRC="bottomright.html" NAME="bottomRight">
</FRAMESET>
</HTML>

The bottom right frame is a simple frame with one image:

<HTML>
<HEAD>
<TITLE> bottom right file </TITLE>
</HEAD>
<BODY>
<IMG SRC="doc.gif" NAME="bottomRight" ID="bottomRight">
</BODY>
</HTML>

The main window is the top right frame. It consists of eight links, demonstrating the following manipulations:

Change the Left and Bottom Right Frames

The first five links point to five of our past columns. Clicking one of them will display the first page of the column in the left frame and one of the column's code pages in the bottom right frame. Here is the link for Column 16:


<A HREF="topright.html" onClick="changePage('../column16/index.html', '../column16/code1.html')
"><B>[16] Dynamic Tooltips</B></A>
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)

Notice that the HREF value is the frame itself, HREF="topright.html". We could have used javascript:void(0) and get the same effect of triggering the link to cause side effects that do not include changing the link itself. The event handler changePage() accepts two pages as its arguments and displays them in the left and bottom right frames:

function changePage(pageIndex, pageCode) {
  parent.parent.frames[0].location = pageIndex;
  parent.frames[1].location = pageCode;
}

Notice the hierarchy of frames here. In order to get to the left frame, we need to go up two levels: one to the parent of the current frame (right column) and one to its parent (top window). In order to get to the right bottom frame, we need to go up to the parent of the current frame (right column) and then choose the second frame (frames[1]).

Load a Frame Set in the Left Column

The link is defined as follows:


<A HREF="topright.html" onClick="loadLeft()"><B>Load a
frameset on the left</B></A>
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)

The loadLeft() event handler is defined as follows:

function loadLeft() {
  parent.parent.frames[0].location = "leftframeset.html";
}

This operation replaces the single left frame with a frame set that is defined as follows:

<HTML>
<HEAD>
<TITLE> right file </TITLE>
</HEAD>
<FRAMESET ROWS="50%,30%,*">
  <FRAME SRC="lefttop.html" NAME="leftTop">
  <FRAME SRC="leftmiddle.html" NAME="leftMiddle">
  <FRAME SRC="leftbottom.html" NAME="leftBottom">
</FRAMESET>
</HTML>

Each of these three files includes a single image.

Load a Frame Set and Change an Image

Here is the link:


<A HREF="topright.html" onClick="loadLeftAndSwitch()"><B>Load a frameset and
switch upper image</B></A>
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)

The loadLeftAndSwitch() event handler is defined as:

function loadLeftAndSwitch() {
  parent.parent.frames[0].location = "leftframeset.html";
  top.setTimeout('parent.parent.frames[0].frames[0].document.images[0].src = "docjslib.gif"',200);
}

Notice the hierarchical position of the top left frame. We have to go up two levels to the top window (parent.parent), and then go down to the first frame (left column), and then again to its first frame (top left frame). Also notice the delay we need to keep between loading the frames and changing one of the images inside one of the frames.

Return to a Single Frame

The last link on the top right frame is:

<A HREF="topright.html" onClick="backToSingle()"><B>Load a single frame on left</B></A>

The backToSingle() event handler is defined as follows:

function backToSingle() {
    parent.parent.frames.left.location = "left.html";
}

Notice that here we used the name of the frame (frames.left), instead of its index into the frames Array.


Created: March 1, 1999
Revised: March 1, 1999

URL: https://www.webreference.com/js/column36/live.html