Re-directing access within frames - Revisited
Re-directing access within Frames #2
You are here: irt.org | Articles | JavaScript | Frame | Changing the location of another frame [ previous next ]
Published on: Saturday 22nd November 1997 By: Martin Webb
Note: Adam Ness has reported that in Netscape 2, there is a problem with relative URL's and frames: - "there seems to be a bug in Navigator 2.x (JavaScript 2.0) that when referring to a relative link using JavaScript, it does not relocate to the link relative to the frame your clicking on, rather relative to whatever the last page loaded was! (very annoying) This is fixed in Navigator 3.0, so the only work around I found was to use absolute URLs for 2.0 browsers!" - thanks Adam.
In this example the test.htm file contains:
<html>
<frameset
rows="50%,50%,50%,50%"
frameborder="1"
framespacing="0"
border="1"
>
<frame
src="frame1.htm"
name="frameName1"
frameborder="1"
border="1"
>
<frame
src="blank.htm"
name="frameName2"
frameborder="1"
border="1"
>
<frame
src="blank.htm"
name="frameName3"
frameborder="1"
border="1"
>
<frame
src="frame4.htm"
name="frameName4"
frameborder="1"
border="1"
>
</frameset>
</html>In blank.htm place the following contents:
<html><body></body></html>
In frame1.htm place the following contents:
<html>
<head>
<script language="JavaScript"><!--
function functionName() {
parent.frameName2.location.href =
window.document.formName.textName.value;
return false;
}
//--></script>
</head>
<body>
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<p>
Press
<font color="maroon"><b><em>Go</em></b></font>
to change the location of the next frame to the
value in the text box.
<p>
<form name="formName" onSubmit="return functionName()">
<input type="text" name="textName" value="frame2.htm" size="20">
<input type="submit" value="Go" onClick="return functionName()">
</form>
</td>
</tr>
</table>
</body>
</html>This uses the onClick and/or onSubmit event to invoke the functionName() function to set the location of the sibling frameName2 to the value of the text field.
In frame2.htm place the following contents:
<html> <body> <table width="100%" height="100%"> <tr> <td align="center" valign="middle"> <p> Press <font color="maroon"><b><em>Go</em></b></font> to change the location of next frame. <form> <input type="button" value="Go" onClick="parent.frameName3.location.href='frame3.htm'"> </form> </td> </tr> </table> </body> </html>
This uses the onClick event to directly set the location of the sibling frameName3 frame to frame3.htm.
In frame3.htm place the following contents:
<html>
<head>
<script language="JavaScript"><!--
function functionName() {
parent.frameName4.subFrameA.location.href = 'frame4a.htm';
parent.frameName4.subFrameB.location.href = 'frame4b.htm';
}
//--></script>
</head>
<body>
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<p>
Press
<font color="maroon"><b><em>Go</em></b></font>
to change the location of two frames.
<form>
<input type="button" value="Go" onClick="functionName()">
</form>
</td>
</tr>
</table>
</body>
</html>This uses the onClick event to invoke the functionName() function to directly set two separate frames, i.e. subFrameA and subFrameB, within the frameName4 frame.
In frame4.htm place the following contents:
<html>
<frameset
cols="50%,50%"
frameborder="1"
framespacing="0"
border="1"
>
<frame
src="blank.htm"
name="subFrameA"
frameborder="1"
marginheight="10"
marginwidth="10"
border="1"
>
<frame
src="blank.htm"
name="subFrameB"
frameborder="1"
marginheight="10"
marginwidth="10"
border="1"
>
</frameset>
</html>In frame4a.htm place the following contents:
<html>
<head>
<script language="JavaScript"><!--
function functionName() {
top.frameName1.location.href = 'blank.htm';
top.frameName2.location.href = 'blank.htm';
top.frameName3.location.href = 'blank.htm';
top.frameName4.subFrameA.location.href = 'blank.htm';
}
//--></script>
</head>
<body>
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<p>
Press <font color="maroon"><b><em>Go</em></b></font>
to change the location of all the frames to blank except one.
<form>
<input type="button" value="Go" onClick="functionName()">
</form>
</td>
</tr>
</table>
</body>
</html>This uses the onClick event to invoke the functionName() function to directly set many frame locations.
In frame4b.htm place the following contents:
<html> <body> <table width="100%" height="100%"> <tr> <td align="center" valign="middle"> <p> Press <font color="maroon"><b><em>Go</em></b></font> to change the location of the top frame. <form> <input type="button" value="Go" onClick="top.location.href='index.htm'"> </form> </td> </tr> </table> </body> </html>
This uses the onClick event to directly set the location of the top document.
Why not try out this example!
Re-directing access within frames - Revisited
Re-directing access within Frames #2
Re-directing access within Frames
Internet Explorer Floating Frames