JavaScript and Frames
- Change the URL in a Frame -
<frameset rows="35%,65%">
	<frame src="topFrame.htm" name="topFrame"></frame>
	<frame src="bottomFrame.htm" name="bottomFrame"></frame>
</frameset>

With JavaScript you can change the URL in not only one frame but multiple frames, something HTML cannot do. Create four functions in bottomFrame.htm. Function changeTop() will change the top frame to disk.htm. Function changeBack() changes the topFrame back to topFrame.htm. Function changeBoth() will put disk.htm in topFrame and ghost.htm in bottomFrame. Function breakOut() will change the top frame or parent which will remove the frameset. In bottomFrame.htm create three functions.

<script language="javaScript">
function changeTop(){
	top.topFrame.location.href="disk.htm"
}
function changeBack(){
	top.topFrame.location.href="topFrame.htm"
}
function changeBoth(){
	top.frames[0].location.href="disk.htm"
	top.frames[1].location.href="ghost.htm"
}
function breakOut(){
	top.location.href="disk.htm";
}

</script>
  1. With JavaScript, from bottomFrame, to change topFrame to disk.htm you would use:
    top.topFrame.location.href="disk.htm" or top.frames[0].location.href="disk.htm"
  2. From bottomFrame, to change the topFrame back to the topFrame.htm you would use:
    top.topFrame.location.href="topFrame.htm" or top.frames[0].location.href="topFrame.htm"
  3. In HTML you cannot change two frames at once, however with JavaScript you can. To change both frames using JavaScript, put disk.htm in the top and ghost.htm in the bottom: top.topFrame.location.href="disk.htm" or top.frames[0].location.href="disk.htm"
    and top.bottomFrame.location.href="ghost.htm" or top.frames[1].location.href="ghost.htm"
  4. From bottomFrame, break out of frames by changing the top or parent frame :
    top.location.href="disk.htm" or
  5. Click here to see the demo.

Don't want your HTML page to be put into frames? Create a function that uses the length property to check for frames. If the length is > 0 set it to 0 to remove the frames. Call the function from the <body onLoad="checkFrames()">

function checkFrames(){
if (top.frames.length > 0)
	top.location="your page";
}