Articles | Redirecting Access Within Frames
| back
Introduction
Frames are not liked by everyone, however, they do have
their uses.
One common problem, is a visitor bookmarking a page
within a web site, and then revisiting that page at a later date without loaded
any prerequisite frames first.
This can sometimes cause unwanted side effects, for
example, page counter not being incremented, JavaScript cookies not being
accessed, and/or JavaScript functions not loaded into parent frames.
There however is a JavaScript solution to this problem:
- Check if the location of the current document is the
same as any parent document, and if so reload the correct frameset.
- Check if the parent document is in fact the correct
document, and if not reload the correct frameset.
Hash and Search
Of course there is a bit more to it than this, as we
would like the initial page loaded by the visitor to be reloaded within the
frameset, and the solution should be compatible with both Netscape Navigator and
Microsoft Internet Explorer.
This can be achieved by passing a search parameter to
the frameset requesting the required page to be reloaded.
It is also possible to pass a hash parameter, however
Internet Explorer 3.0 does not appear to support this in Jscript.
The downside to using a search parameter, is that when
this is used offline with Internet Explorer it does not work - but then this is
not the only thing that does not work offline with Internet Explorer.
HTML Frameset Definition
The example I will demonstrate will use the following
frame structure:
test.htm
nav.htm
|
dummy.htm
or
display.htm
or
another.htm
|
|
The test.htm document defines two frames,
using HTML this would usually be created like this:
<HTML>
<FRAMESET COLS="50%,50%">
<FRAME SRC="nav.htm" NAME="nav">
<FRAME SRC="dummy.htm" NAME="display">
</FRAMESET>
</HTML>
|
Which would load the nav.htm document within
the nav frame, and the dummy.htm document within the display
frame.
The following JavaScript code is place within the HEAD
tag of nav.htm, dummy.htm, display.htm and another.htm,
which will reload the test.htm file if they are not already within a
parent document:
<script language="JavaScript"><!--
if (parent.location.href == self.location.href)
window.location.href = 'test.htm';
//--></script>
|
To reload the same document within the display
frame of test.htm, we need to pass a reference. By expanding the previous
JavaScript code we can pass a search string, so for example in the display.htm
document we use the following:
<script language="JavaScript"><!--
if (parent.location.href == self.location.href)
window.location.href = 'test.htm?display';
//--></script>
|
JavaScript Frameset Definition
When loading the test.htm now we need to check
if any search string has been passed, and if so load the required document in
the display frame, the contents of test.htm need to be
replaced with the following code:
<html>
<script language="JavaScript"><!--
var correct_frame = true;
document.write('<frameset cols="50%,50%">');
document.write('<frame src="nav.htm" name="nav">');
document.write('<frame src="' +
(location.search ? location.search.substring(1):"dummy") +
'.htm" name="display">');
document.write('<\/frameset>');
//--></script>
</html>
|
The JavaScript code (location.search ?
location.search.substring(1):"dummy") is a Conditional
expression.
The following is taken from Netscape Navigator 3.0
JavaScript Guide:
A conditional expression can have one of two values
based on a condition. The syntax is
(condition) ? val1 : val2
If condition is true, the expression has the
value of val1. Otherwise it has the value of val2. You can use a
conditional expression anywhere you would use a standard expression.
For example,
status = (age >= 18) ? "adult" : "minor"
This statement assigns the value "adult" to
the variable status if age is eighteen or greater. Otherwise, it
assigns the value "minor" to status.
Therefore if location.search is not null, the
expression returns location.search.substring(1) (i.e. the search string
minus the leading ?), otherwise it returns dummy.
Whichever is returned is then prefixed to the .htm
which is then used as the SRC file for the display frame. So it either
loads the default dummy.htm document or the document which the visitor
initially loaded.
Try out this example.
Note, if you are trying this offline in Internet Explorer, then the process
will not work correctly.
NOTE: The above link will open in a new window.
Checking for *your* frames
If, however, either the nav.htm, dummy.htm,
display.htm and/or the another.htm document had been loaded
into a frame, but not the right frame, then nothing would happen as the parent.location.href
would not equal the self.location.href. What is needed is an enhanced
version of the check:
<script language="JavaScript"><!--
if (parent.location.href == self.location.href || !parent.correct_frame)
window.location.href = 'test.htm?display';
//--></script>
|
If the variable correct_frame does not exist
within the parent document then the parent document is not the
test.htm document, so load it.
However, Jan Ehrhardt has pointed out that the Opera
browser does not allow variables from other frames to be interrogated, not only
that but he kindly provided the following solution that detects for the name of
the required frame instead:
var correct_frame = 0 + (parent.nav ? 1 : 0);
if (parent.location.href == self.location.href || !correct_frame)
window.location.href = 'test.htm?display';
|
Try out this example.
Note, if you are trying this offline in Internet Explorer, then the process
will not work correctly.
NOTE: The above link will open in a new window.
Since this article has been written - another
more uptodate article has been published - Re-directing
access within Frames #2.
Articles | Redirecting Access Within Frames
|
back
|
