Re-directing access within frames - Revisited
Re-directing access within Frames #2
You are here: irt.org | Articles | JavaScript | Frame | Re-directing access within Frames [ previous next ]
Published on: Wednesday 9th April 1997 By: Martin Webb
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:
Of course there is a bit more to it than this, as we would like the intial page loaded by the visitor to be reloaded within the frameset, and the solution should be compatiable with both Netscape Navigator and Microsoft Internet Explorer.
This can be achieved by passing a search parameter to the framset 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 offine with Internet Explorer.
The example I will demonstrate will use the following frame structure:
|
test.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>
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 : val2If 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.
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.
Since this article has been written - another more uptodate article has been published - Re-directing access within Frames #2.
Re-directing access within frames - Revisited
Re-directing access within Frames #2
Changing the location of another frame
Internet Explorer Floating Frames