Categories:

Loading two frames with one link

I must have received over 1000 mails asking me this question: "How do I load two frames with one link"? Well, here you are. But before we get to that question exactly, lets first learn some useful background information about accessing JavaScript objects in one frame from another.

How to access objects in one frame from another

Ok, the title may be a little ambiguous, but lets do an example to see what I mean by "cross-accessing" objects. Lets say we have a basic two-columned frame:

page1

 page2

Further more, lets assume this is what's in page1.htm:

//page1.htm
<html>
<body>
<script type="text/javascript">
function testing(){
	var x="this is page1!"
	alert(x)
}
</script>
</body>
</html>

Ok, so we've created a little script in page1, that when run, will alert something. Normally, you can only call this function in page1, by doing something like this:

<script type="text/javascript">
testing()
</script>

If you put the above code in page2, however, you will get an error message saying this function is not defined, and of course, that's true. Frames contain separate pages that are not connected in any other way other than the fact that they are stuck together by their master page (kinda like brothers and sisters). But wait..fortunately, JavaScript has provided a way to cross-access objects and variables from one frame via another...and the syntax is really easy:

parent.framename.(object/property)

That's all there is to it. Notice we have to first give each frame a name before proceeding (as mentioned in the previous section when adding specific types of links). For example, lets create the above master page, and add in some names so we can access page1's function from page2!

<html>
<frameset cols="30%,70%">
<frame src="page1.htm" name="foody">
<frame src="page2.htm" name="goody">
</frameset>
</html>

Now, to access page1's lame little function, this is what we will do in page2:

//page2.htm
<html>
<body>
<script>
parent.foody.testing()
</script>
</body>
</html>

Knowing this syntax, we can access any objects/properties/variables stored in one frame from another. The example above will cause the function to be run in page1, although we called it in page2.