More on Frames

Frames can be useful and on other occasions they can be a nuisance. Many hate frames, and others love them and make all sorts of complex frames in one page. In this lesson we will look at:

  1. Hyperlinks in frames
  2. Loading more than one page at a time
  3. Using names instead of frames[1], etc
  4. Using anchors or bookmarks to load the page just where we want it

Click here and see what happens on the left. When I click, I get a new frame appear on the left.

Here is the code:

Click <a href="#" onclick="parent.frames[1].location='2ndSide.htm'">here</a> and see what happens on the left. I get a new frame appear on the left.

We put a dummy URL in the HREF part and use the following code in the onClick part:

onclick="parent.frames[1].location='2ndSide.htm'"

The new page on the left is called 2ndSide.htm. (The original page is called 1stSide.htm, original?) We get the new page by telling Java Script where we want to put a new page using LOCATION. To sum up again we say that the location of frames[1] should be occupied by the page 2ndSide.htm.

And, hopefully, that is what happens!


Now click here and not what happens. I get a text version appear at the top. Here's the code:

<a href="#" onclick="parent.frames[0].location='2ndTop.htm'">click</a>

Now this is much like the code we had before except that it has frames[0] and this is why the the page loaded in the top.


Now click here and see what happens.

I get all the frames come back to the beginning - with only one click. We change two pages for the price of one. Here's the code:

<a href="#" onclick="parent.frames[0].location='1stTop.htm';parent.frames[1].location='1stSide.htm';">

here</a>

This code is much like the others except that we have two LOCATION statements and we have separated them with semicolons. You can use as many of these as you have spare frames.


Now click on this link.

How exciting! The same thing happened as before. I got the second page to load on the left. But not quite the same ... Here's the code:

<a href="#" onclick="parent.contents.location='2ndSide.htm'">link.</a>

This time I didn't write frames[1], but I wrote the name of the left-hand frame, in this case contents. You can identify the frame to load the new page by using frames[1] or by using its name.

Note that because Java Script was written by mathematicians, the numbers begin at 0.


Finally, try clicking here.

And yes it is truly the first page on the side - would it lie to you? And here is its code:

<a href="#" onclick="parent.contents.location='1stSide.htm#1'">here.</a>

I have created an anchor called "1". And the LOCATION in this bit of code refers to the first side page and its anchor.


So by using a bit of Java Script we can jump around our pages and do all sorts of wonderful things.

We cannot do this simply with HTML because we need a little code to let the browser know where our page is to be loaded. We have to go up to the top of the frame hierarchy, to parent, and then go down to our page. That is, we can't just say 'contents', because this page doesn't know 'contents' from Adam. You have to go up to the 'parent' which knows all its beautiful little children. It even knows contents, or frames[1], as it affectionately refers to it!