Frames

FRAMES
onClick

<a>, onClick
Changing the contents two frames.

<html>
<head>
<title>Frames - 8</title>
</head>

<frameset rows="75,*"> 

 <frame name="title" src="title.html">
 <frameset cols="35%,*"> 
  <frame name="left" src="onleft1.html"> 
  <frame name="right" src="right1.html"> 
 </frameset> 

</frameset> 

</html>

This frameset document sets up a window with three frames. Clicking Back and Next in the output window causes both the left and right frames to change.

Notes

All of the frames are named using the name attribute.

In onleft1.html the important line is

<a href="onleft2.html" onClick="parent.right.location.href='right2.html'">Next</a>

The link contains a JavaScript event handler, onClick. An event handler is some code that responds to an event, such as clicking or moving the mouse around. When a link containing an onClick is clicked, the link is activated the usual way and the code listed after onClick is executed. In this case, a new file is display in the frame that contains the link and in the frame named right.

Note the use of single quotation marks around the file name within the event handler.

In the script following onClick, parent is the frameset that contains the frame the onClick is in. right is the name of the frame within this frameset that we want to put the new file into. parent.right.location.href is where the name of the file displayed in the right frame is stored. Assigning a URL to parent.right.location.href causes the file at that URL to be displayed. (parent.right.location works the same way here.)

Here is the source code for the files used in this sample.

`frame8.html`	The single frameset document
`onleft1.html`	Links to other documents
`onleft2.html`
`onleft3.html`
`title.html`	Permanent title
`right1.html`	Content shown by clicking left side
`right2.html`
`right3.html`