Need an HTML Frames review? Try
W3Schools Frame Tutorial
Escaping Frames
When you create a Web page, you expect the user to load it
in the browser's main window. You don't want it to be loaded
in another site's frame. By adding a simple cross-browser,
cross-platform script into the HEAD portion of your document,
you can ensure that the page loads in the entire window. Here's
the script:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (window != top) top.location.href = location.href;
// -->
</SCRIPT>
The condition evaluates to true only if window is not equal
to top. In other words, if the page's direct window isn't the
topmost window in the browser, the condition evaluates to true.
top is the highest window object in the hierarchy. If the
topmost page doesn't feature any frames, the object model has
only one level of window objects, so top is equal to window.
However, if the browser is currently displaying a frame-based
document, each child frame has a corresponding window object.
Note that the following expressions would also function properly:
window != parent
self != top
Back to the script. If the page's window isn't the topmost
window in the object model, your page is being displayed as
a frame in a frame-setting document. In order to escape the
frames, you need to set the URL of the upper window to the
URL of the current page:
if (window != top) top.location.href = location.href;
To access javascript variables and other things
in one frame from another frame use the following example:
parent.framename.attributes_to_change
Replacing framename with the name you gave the frame in your
frameset, ie:
<FRAME src="jex14.htm" name="right_frame">
In this case, you would access something in that frame with:
parent.right_frame.attributes_to_change
Let's start by changing the value of a text box in a frame
on the right from a frame on the left side. First, set up a
little frameset. This will require 3 separate html pages. Your
frameset, and the html for your 2 frames. Let's begin with
the frameset:
<HTML>
<HEAD>
<TITLE>Frames Values</TITLE>
</HEAD>
<FRAMESET cols="20%,80%">
<FRAME SRC="jex13.htm" name="left_frame">
<FRAME SRC="jex14.htm" name="right_frame">
</FRAMESET>
</HTML>
The two pages I will use inside the frameset are "jex13.htm" and "jex14.htm".
The left side (jex13.htm) will have this html code:
<HTML>
<HEAD>
<TITLE>JavaScript Example 13</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value="What is cool?"
onClick="parent.right_frame.document.form1.text1.value='Me!'">
</FORM>
</BODY>
</HTML>
This is where we use our new command, inside the onClick=" " command:
onClick="parent.right_frame.document.form1.text1.value='Me!'"
As you can see, we access the right frame with the "parent.right_frame." and
then we add what we want to change onto the end. Since we want
to change something inside the document object, we have to
use "parent.right_frame.document.". If you leave
out the "document" the browser defaults to using
the "window" object, which we will use later on.
But for now, we want the "document" object. Now,
to access the form, we tack on the name of the form, "parent.right_frame.document.form1.".
Then, we access the textbox by adding the name of the textbox
onto it: "parent.right_frame.document.form1.text1.".
Finally, we can access the value attribute of the textbox by
placing value at the end, and assigning it a value with the
eqaul sign:
"parent.right_frame.document.form1.text1.value='Me!'"
So, we now have a button that will change a textbox in the
right_frame. The html code for the right frame (jex14.htm)
is simply a form with an empty textbox:
<HTML>
<HEAD>
<TITLE>JavaScript Example 14</TITLE>
</HEAD>
<BODY>
<FORM name="form1">
<INPUT type="text" name="text1" size="25" value="">
</FORM>
</BODY>
</HTML>