Changing the location of another frame
You are here: irt.org | Articles | JavaScript | Frame | Changing the location of another frame
Published on: Saturday 22nd November 1997 By: Martin Webb
Introduction
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>
|
Changing a frame by typing in the URL in a text box of a different frame
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.
Changing a frame by pressing a button from within a different frame
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.
Changing two frames by pressing a button from within a different frame
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>
|
Changing multiple frames by pressing a button from within a different frame
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.
Changing the top document
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!
Feedback on 'Changing the location of another frame'
View the profile on Martin Webb and the list of other Articles by Martin Webb.
| 