TJKDesign: Home Page
Creative Commons License
This work is licensed under a
Creative Commons License.

If you've found this beneficial, consider making a donation through Paypal

Guild of Accessible Web Designers Logo
Valid XHTML 1.0!
Section 508
Web Standards
Tables-less Layout
Frames: a solution or a problem?
XML Feed
NN4.7 Safe!
Give it a Try!

About Scripting

We've seen in Section 1 [The very basic] how to use the values of the name and target attributes of the frame element to load a document in a specific frame.

In fact, there are three different HTML elements in which one can use the target attribute:
- at the frame level, i.e., <frame src="links.asp" name="navigation" target="myMainframe">
myMainframe becomes the default value for every document hosted by that frame.
- at the document level, i.e., <base target="myMainframe"> [to use between the head tags in any given document].
myMainframe becomes the default value for every LINK inside that document.
- at the HTML 'A' tag level, i.e., <a href="home.asp" target="myMainframe">
myMainframe is the target for the link inside that 'A' tag only.

A target value set inside an 'A' tag overwrites a target value set at the document and/or frame level, similar to the cascade of styles with Cascading Style Sheets.
A target value set using "base target" inside a document overwrites a target value set at the frame level.

If you think that talking about the target attribute does not have much to do with scripting, you're right.
In the following section, we're going to see how we can access specific frames within the frame tree [the object hierarchy] to remotely access elements, retrieve values, apply methods, etc.

To explore the relationships between frames, we have access to a few properties:
- top
retrieves the topmost window [which is also its own parent].
- parent refers to the window object in which it is contained. It retrieves the parent in the frame tree [be aware that Netscape 4x handles parent targets poorly].
- frames[] is an array that exists for every window object; through its elements, it is possible to reference every single frame [whether or not it has a name].
- window and self are self-referential properties; they retrieve a reference to the current window or frame [they are synonyms].

Take note To avoid unexpected behavior in NN4x when using parent to target a frame, you should do one of the following: use top when possible, call the frame by its name [if available], or better, use the frames[] array.

Take note When self evaluates to self.parent or self evaluates to self.top it means that the current window is also the topmost window.

Take noteJavaScript variables cannot be interrogated across frames in some versions of Opera 3.x. Also, in some cases, earlier versions of MSIE can skip the content of the noscript tag pair [read this].

The 2 figures below are linked to 2 popups [A and B] that show basic use of these properties. I've built them to demonstrate that the relationships between frames don't depend on layout, but on code structure.

Figure A

frame tree

The browser loads a frameset that holds 4 frames:
a top frame, a left frame, a middle frame, a right frame.

This is the code in the topmost window:

<frameset rows="62,*">
<frame src="topPage.asp" name="topframe">
<frameset cols="40,*,40">
<frame src="white.asp" name="leftframe">
<frame src="scripting.asp" name="middleframe">
<frame src="white.asp" name="rightframe">
</frameset></frameset>

We have a total of 5 documents including the frameset.

The purpose of most of the links inside the popup is to load a document [black.asp] into a specific frame.

Using the popup from Figure A, it is possible to verify that - in our example - the following references have the exact same value:
window, self, parent.frames[2], top.frames[2],
top.middleframe.

Take noteIf you use a self-referential property outside an "href" attribute of an HTML 'A' tag with the said attribute set to "javascript:;" you will need to add a "return false;" statement following the "call". i.e.:

<a href="javascript:;" onClick="self.location.href='black.asp';return false;">black.asp</a>

On the other hand, there is no need to use a self-referential value because the target value, by default, is _self [linked documents load into the active frame].

Take note it is also possible to use recursive references; in our example parent and parent. parent are the same.
Actually for this particular frameset: top, parent and parent.parent are all identical.

Figure B

frame tree

The browser loads a frameset that holds 2 frames:

  1. a top frame,
  2. a bottom frame [holding a nested frameset].

This is the code in the topmost window:

<frameset rows="62,*">
<frame src="topPage.asp">
<frame src="Nested.htm" name="subframeset">
</frameset>

The second document is a frameset itself; here is the code of this nested frameset:

<frameset cols="40,*,40">
<frame src="white.asp" name="leftframe">
<frame src="scriptingframe.asp" name="middleframe">
<frame src="white.asp" name="rightframe">
</frameset>

We end up - for the exact same layout - with a total of 6 documents versus 5 in Figure A.
Because one of the frames holds a frameset, it adds one level to the frame tree.

We've seen that the frames property refers to an array of frame objects, each of which represents a frame contained within the window.

Because the array starts at 0, frames[1] refers to the second element.
The first frame is frames[0],the second frame is frames[1], and so on.

A frameset loaded into another frameset [as in our example] creates its own frames[] array.
JavaScript code refers to the third frame of a frameset child [loaded into the second frame of the parent frameset] like this:
frames[1].frames[2]

We can access a child frame from its parent by using: self.nameOftheChildframe

The noscript Tags:

Any content between the noscript tag pairs will not be rendered by JavaScript capable Browsers.
Because NN2 does support JavaScript but does not know about the noscript tags [introduced with NN3] it will not ignore the content within these tags.

Even with JavaScript turned off, some versions of MSIE3/MSIE4 will skip the content within the tags; in some cases, these versions of MSIE will choke on a document that uses the noscript and noframes tags altogether.

The limits of the DHTML Object Model:

To prevent frame spoofing there are some restrictions to script interaction.
Free interaction is only possible with documents that share not only the same domain properties but also the same URL protocol. This is true for windowS, framesets, frames, and Iframes.

Only access that attempts to read out or modify content is restricted.
For instance, it is possible to use location.href for navigation purposes, but the href property cannot be read if the URL is of a different domain.

Any unauthorized access is blocked and the user gets a "permission denied" error.

MSIE4.01 won't even let a document from one server in one frame to access the name of a frame that holds a document from another.

If you cannot use document.domain as a workaround, you still have one option: HTML Applications [HTAs] - a feature of MSIE[5] that enables cross-frame scripting [see Microsoft Knowledge Base Article # 241754].