First, I should explain the difference between
top and
parent.
Top
This is a reference to the highest parent. Or, the first frameset. All frames are a child to this object. With other words, top is the highest level of the hierarchy.
Parent
This is a reference to the parent of the current page.
Parent only goes up one level, so a parent could be a child to another parent.
Frames: An example
Suppose you have a frameset that consists of two columns. A left frame containing a navigation called
navFrame and a right frame called
mainFrame.
The mainFrame also holds three row frames.
A small frame called
headerFrame containing links and/or ads, a content frame called
contentFrame used to display the pages and a footer frame with some contact information called
footerFrame.
The purpose of this would be that the header and footer frames will never change, since they contain essential information that should be displayed at all time.
contentFrame
This will be the frame available for displaying pages chosen with the navigation. Normally, you would put a link in the navigation page like this:
Code:
<A HREF="home.html" target="contentFrame">Home</A>[code], but you can also change the URL using JS.
Within the navigation page you add this function
[code]function loadUrl(url) {
targetFrame = parent.frames.mainFrame.frames.contentFrame;
targetFrame.location.href = url;
//sets focus on loaded document
targetFrame.window.focus();
}
In the body you write a link like the following:
Code:
<A HREF="javascript:loadUrl('home.html')">Home</a>
So, when you click on home, the page
home.html is loaded into contentFrame and receives focus.
Notice that I've used
parent. I didn't use
top here because I know that contentFrame is at a lower lvl then navFrame, and in some cases it would make the code unnecessary long.
Reloading the navigation within contentFrame
Sometimes you want to reload the navigation frame. For instance, when your navigation is build by an ASP script, you need to reload it often because you have to pass certain parameters to modify the page. The folllowing code accomplishes this:
Code:
function reloadNav(url) {
targetFrame = top.frames.navFrame;
targetFrame.location.href = url;
}
To be able to use it from within each frame, you should place it at the top. If you do that, you can easily call it from each page like this:
Code:
top.reloadNav('nav.asp?param=someValue')
Reloading the entire frameset
This is easy enough, you just have to use this:
Reloading a frameset can be particularly usefull for reloading a homepage. Especially if it consist of several frames performing certain checks. (Eg. page hits, set a cookie, ... ).
