If you have multiple frames (including iFrames) on a page, and you use javascript, then you may have a need for accessing a variable in one frame from javascript in another frame. Or you may need to call a function in one frame from javascript in another frame. This article will give you the syntax and semantics for inter-frame communication, and provide an interesting example.
From the perspective of your javascript, a frame is a window object. Every window has its own set of objects and variables. A variable that is global (declared outside any function) is only global within the scope of its containing window object.
To access a variable in one frame from javascript in another frame, you need a reference to the variable's containing window object. The window object has a property named "top", which is a reference to the top-level window object. This corresponds to the frameset window. The frame element has an attribute called "name" which allows you to access that window object in javascript.
Let's assume we have a frameset with 2 frames, and they are named Frame1 and Frame2. The following javascript shows how to get a reference to a frame (window) object.
var f2 = top.Frame2;
Now f2 is a reference to the window object for Frame2. With this syntax we can access global variables declared in Frame2 from javascript in Frame1.
top.Frame2.varInFrame2 = 100;
We can also call global functions defined in Frame2 from javascript in Frame1. Actually, they are not "global functions", they are methods of the window object for Frame2.
top.Frame2.funcInFrame2();
Each HTML element on a page is accessible in javascript as an Element object. To get a reference to an Element object we call the "getElementById" method of the document object and pass it the "id" of the HTML element. Every window object has its own document object, and every document object has its own "getElementById" method. The object hierarchy in one window is independant of the object hierarchy in another window.
To access an Element object in Frame2 from javascript in Frame1, we call the "getElementById" method of the document object contained by Frame2.
var ele = top.Frame2.document.getElementById('eleIdInFrame2');
Now we can change properties and call methods of that Element object.
ele.style.visibility = "visible";
The following example utilizes the techniques discussed above. There are two vertical frames. In the left frame are terms which use a mouseover event to show and hide their definitions in the right frame.
<html> <head> </head> <frameset cols="30%,70%"> <frame name="Frame1" src="frame1.html"> <frame name="Frame2" src="frame2.html"> </frameset> </html>
<html>
<head>
<title>Frame1 HTML</title>
<style type="text/css">
.term {
color:#0000ff; background:#ccccff;
margin:10px 0px 0px 0px;
padding:2px 2px;
}
</style>
<script type="text/javascript">
function showDef(t) {
top.Frame2.activeDef.style.visibility = "hidden";
top.Frame2.activeDef = top.Frame2.document.getElementById("def" + t);
top.Frame2.activeDef.style.visibility = "visible";
}
</script>
</head>
<body>
<div class="term" onmouseover="showDef(0)">
Inter-Frame<br>Communication<br>Example</div>
<div class="term" onmouseover="showDef(1)">Triangles</div>
<div class="term" onmouseover="showDef(2)">Squares</div>
<div class="term" onmouseover="showDef(3)">Lines</div>
<div class="term" onmouseover="showDef(4)">Circles</div>
</body>
</html>
<html>
<head>
<title>Frame2 HTML</title>
<style type="text/css">
.def {
position:absolute;
visibility:hidden;
left:10px; top:10px;
width:300px; height:200px;
color:#0000ff; background:#ccccff;
}
a { color:#0000ff; background:#ccccff; }
</style>
<script type="text/javascript">
var activeDef;
window.onload = function() {
activeDef = document.getElementById("def0");
activeDef.style.visibility = "visible"
}
</script>
</head>
<body>
<div id="def0" class="def">
HFTOnline Support Forums<br><br><br><br><br>
<a href="">HFTOnline.com</a></div>
<div id="def1" class="def">
Our soldiers and lowest classes of workmen are isosceles triangles.
Our Middle class consists of equilateral triangles.</div>
<div id="def2" class="def">
Our professional men and gentlemen are squares and pentagons.</div>
<div id="def3" class="def">
Our women are straight lines. If our highly pointed soldiers are formidable,
it may be readily inferred that a female, in Flatland, is a creature by no
means to be trifled with.</div>
<div id="def4" class="def">
When the number of sides becomes so numerous that the figure cannot be
distinquished from a circle, he is included in the priestly order.</div>
</body>
</html>
I tested the above example with IE6.0, Mozilla1.0, and Opera6.01. You can view the example online.