First we'll talk about Frames. How is using JavaScript different with Frames than it is without? Well, if you're making each Frame completely independent, there is no difference. The difference comes when you want one Frame to be able to affect another Frame.
First of all, let's look at the naming and heirarchy of Frames.
When we declare our Frames, we have the option of naming them, like so:
To have a link open a page in another Frame, we'd used the TARGET option for the link, like so:
Programmer's Guide
Now, none of that is JavaScript. What does JavaScript have to do with Frames?
Sometimes, you will want to have your JavaScript code reference a variable that is in the JavaScript code for another Frame. To do that, we just prepend the Frame's name followed by a period.
For instance, assume we have two Frames, table and pages, and table has a variable named page_number. If we wanted to use page_number from pages, we'd call it table.page_number.
This prepending also applies to the links[] and forms[] arrays. So, table.forms[0] and table.links[3] are both valid ways to affect the contents of the table Frame.
The page which defines the Frameset is also a valid place to reference, but it's not a Frame, and it doesn't have a name. What do we do with it? We call it parent. So, parent.page_number would refer to a variable named page_number located in the page defining the Frameset. Technically, parent refers to the page containing the current Frameset, since a Frame may contain a page containing more Framesets.
So what if we have a Frame which defines more Frames which defines more Frames, etc... Do we have to use parent.parent.parent.page_number? The answer is no. We can use top. So, top.page_number refers to the page at the very top of the heirarchy.
Now, suppose we want to open a page in another Frame without making the user click on a TARGETed link. We can use the location object. The location object contains all the information about where the current frame or page is. It has the same properties as Links.
| Method | What it affects |
|---|---|
| host | http://www.generic.com/~nobody/path/filename.html |
| hostname | http://www.generic.com/~nobody/path/filename.html |
| href | http://www.generic.com/~nobody/path/filename.html |
| pathname | http://www.generic.com/~nobody/path/filename.html |
| protocol | http://www.generic.com/~nobody/path/filename.html |
The way we use the location object is like this:
top.table.location.pathname="/~templedf/crash/javascript/NPGuide.html;That will set the table Frame to the NPGuide. If we wanted to set the pages Frame, we'd use:
top.pages.location.pathname="/~templedf/crash/javascript/NPGuide.html;And to chage the whole page, not just a single Frame, use:
top.location.pathname="/~templedf/crash/javascript/NPGuide.html;The way that we refer to a Frame's location object is to start with top and work our way down. So if we had a Frame named frame2 inside of a Frame named frame1, we would reach it's location object by top.frame1.frame2.location.property.
I will post any example of how all this works a little later.
The next lesson is Advanced.