Home > JavaScript > Framesprinter version

JavaScript Frames

Frames in JavaScript are treated like windows since each frame in a frameset is associated with a window object (Frames are covered in the HTML Framesets Tutorial).

Every window has a frame property that consists of an array of window objects each of which represents a frame contained within the window.

If a window has no frames then the array is empty. If it does have frames then subframes are referred to using array notation as
frames[0], frames[1] etc.

A subframe may itself have subframes and these can be referred to as objects contained within objects
e.g. frames[0].frames[0], frames[0].frames[1] etc.

Each window has a parent property that refers to the window object in which it is contained.

If the window is a top-level window then parent refers to itself.

For the first subframe to refer to the second subframe within a window (its sibling) then it can do so by referring back to the parent
e.g. parent.frames[1]

If a frame within a frame within a top-level window wishes to refer to the top-level window then it can do so with parent.parent

No matter how deeply a frame is nested, it can refer directly to the top-level window by using the top property.

Frame Names

In the same way that a window may be given a name when it is created, so can a frame (as covered in HTML Frame Element Tutorial).

This allows you to direct results from a HTML anchor or form tag to a frame using the target attribute.

It also creates a name property for the object, which allows a way of referring to frames that is easier than using the array of window objects.

To refer to a sibling frame with the name menu you can use parent.menu instead of parent.frames[1].

Examples of Changing URLs within Windows

<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
    /* This script opens a window and returns
    a reference to the window in the variable x */
    var x = window.open("http://www.yourdomain.com","mywindow","width=400,height=400");
</script>


<form>
<input type="button" value="Change URL in Window x" onclick="x.location='http://www.anotherdomain.com';">
</form>


<form>
<input type="button" value="Change URL in This Window" onclick="window.location='http://www.anotherdomain.com';">
</form>
</body>
</html>

Window Scope

The window object is the highest level JavaScript object and has it's own independent execution context.

Each window or frame is a global object with it's own set of global variables however it is run by the same JavaScript interpreter.

This means that variables and functions in one window or frame can be referred to by the code in another window or frame using the names property already mentioned.

First create a frameset to hold two named frames.

A Frameset to Hold Two Columns

Create the Content for the Left Column.

The Left Frame

<html>
<head>
</head>
<body>
This is the left column<br>
<script language="javascript" type="text/javascript">
// Create a global variable within the scope of this window
var myvariable = "Left Column";
</script>
</body>
</html>

Create the Content for the Right Column.

The Right Frame

<html>
<head>
</head>
<body>
This is the right column<br>
<script language="javascript" type="text/javascript">
// This will print out myvariable = Left Column
document.write('myvariable = ' + parent.left_column.myvariable);
</script>
</body>
</html>

Notice that
document.write('myvariable = ' + myvariable);
won't work because without
parent.left_column.
the statement refers to a variable within the scope of the window right_column - and that hasn't been declared.

Note: The example above works because the left frame is loaded before the right frame therefore the variable myvariable is created before it's referred to.

Since JavaScript treats both variables and functions as objects then the same can be done with a function as with a variable.

The Left Frame Defines a Function

<html>
<head>
</head>
<body>
This is the left column<br>
<script language="javascript" type="text/javascript">
    function highlight (text)
    {
        text = "<b><i>"+text.toUpperCase()+"</i></b>";
        return text;
    }
</script>
</body>
</html>

The Right Frame Invokes the Function

<html>
<head>
</head>
<body>
This is the right column<br>
<script language="javascript" type="text/javascript">
// This will highlight a supplied string
document.write(parent.left_column.highlight("some text"));
</script>
</body>
</html>

Again notice that invoking
highlight("some text");
won't work without
parent.left_column.
because the function doesn't exist within the scope of the window right_column.