Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt

Related items

Re-directing access within frames - Revisited

Re-directing access within Frames #2

Re-directing access within Frames

Internet Explorer Floating Frames

Changing the location of another frame

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

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!

Related items

Re-directing access within frames - Revisited

Re-directing access within Frames #2

Re-directing access within Frames

Internet Explorer Floating Frames

Feedback on 'Changing the location of another frame'

View the profile on Martin Webb and the list of other Articles by Martin Webb.

©2013 Martin Webb