April 8, 2000 - Changing Frames | WebReference

April 8, 2000 - Changing Frames

Yehuda Shiran April 8, 2000
Changing Frames
Tips: April 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

In one of our previous columns we built a frame based navigational site in which links in a navigation frame opened both a new page in the main content frame and an additional page in a third frame. The first five links in the example 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's what the link for Column 16 looks like:

<A HREF="topright.html" 
   onClick="changePage('../column16/index.html', '../column16/code1.html')">
   <B>[16] Dynamic Tooltips</B></A>

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]).

Learn more about frames in Column 36, JavaScript and Frames, Part I .