This page was last updated on 2012-08-21
Setting it Up
As you probably know, frames are a HTML technique which allow you to split one page into a number of contained windows, each of which hold a separate HTML file. While all of the component pages are displayed together they don't actually share any connections. A function executed in one will have no effect across in another. So we need to gain control of each frame through a part of the Document Object Model which assumes the place of the
First, you'll need to make sure that all of your frames have been given a
name attribute. They probably all will have one installed since it's necessary for cross-frame linking, but just make sure. Something like this is fine:
<frame src="navigation.html" name="nav">
<frame src="maincontent.html" name="content">
The Frame Tree
top, holds some frames underneath it. If these frames have nested framesets inside themselves, then a further level is added to the tree. A page with frames set up as on the left will have a frame tree as on the right:
Pretty simple, right? The
top object has two elements, which are referenced by the
name values you have given them previously. All you need to glean from this is each frame's position relative to the others. A more complex example would mean opening a new frameset inside an existing frame. Below we have something a bit more tricky, where the
content frame has had three new frames opened inside it.
A bit more complex, that. As you can see, three new frames have been added on a new level underneath
content, which retains its place in the tree, even though it isn't seen by the user.
Traversing the Tree
To modify something in another frame you must first travel along the frame tree from the frame you're in to the frame you want to control. This involves some keywords.
Every frame has what's known as a parent frame — that is, the frame above it in the hierarchy.
one's parent is
nav's parent is
top's parent is
top too (there aren't any more levels up, so it takes itself as a parent). To access a parent frame, we use just that:
three, to get to
top, we could write
Some frames also have children, predictably the frames held underneath them. Above,
top has two children,
content has itself three children. To access a child frame from its parent, we use
We now have enough to move between frames This is all very similar to relative linking, if you're looking for an analogy. To get from
nav, we'd write
To go to
top, we could write
The final method of addressing a frame is to start at the
top and drill down to the frame you want. This is a useful shortcut if you're far down a complex tree and want to access a frame that's higher up. Simply start off with
top and work down to the frame you want.
Now that you know the syntax, I can show you a real example. Say we were in the frame
one, and we wanted to execute a function that's in
nav. We traverse the frame tree, and then once we're in the right place we execute the code as if we're in the same document after that point. Think of the frames part of the following lines as equivalent to
window. A function call might look like this (sending 6 as an arbitrary parameter):
Accessing variables and the rest is much the same:
parent.parent.nav.document.var = "Hooray";
parent.parent could be replaced with
top if you're smart. If you're having any trouble, Peter-Paul Koch has written a fine » frame tree parser which you can use to print out a diagram of your tree while you're working with it.
Read our review.