Using JavaScript within HTML frames, part two
Notes from May 25, 2005 class
Inline frames
The same HTML and JavaScript code we used Monday can work with inline frames as well. Here's a link to a working example. The code is as follows:
<html>
<head><title>Inline</title>
<script language="JavaScript" type="text/javascript">
<!--
var pagesVisited = new Array();
function returnPagesVisited()
{var returnValue ="So far you have visited the following pages\n";
var pageVisitedIndex;
var numberOfPagesVisited = pagesVisited.length;
for (pageVisitedIndex = 0; pageVisitedIndex < numberOfPagesVisited; pageVisitedIndex++)
{returnValue = returnValue + pagesVisited[pageVisitedIndex] + "\n";
}
return returnValue;}
function addPage(fileName)
{var fileNameStart = fileName.lastIndexOf("/") + 1;
fileName = fileName.substr (fileNameStart);
pagesVisited[pagesVisited.length] = fileName;
return true;}
//-->
</script>
</head>
<body>
<h1>Inline frames</h1><p>The same concept can work with inline frames.</p>
<iframe src="page_a.html" width="500" height = "300" name="frame2"></iframe>
</body>
</html>Using JavaScript thorughout nested frames
Here's an example of using Javascript across nested frames. There are several pages that need to be created. A working example of all these pages, and their scripts, is here.
First, create the master frameset, containing the major JavaScript that'll be accessed by all framed pages:
<html>
<head><title>The complex frameset page</title>
<script language="JavaScript" type="text/javascript">
<!--
var pagesVisited = new Array();
function returnPagesVisited()
{var returnValue ="So far you have visited the following pages\n";
var pageVisitedIndex;
var numberOfPagesVisited = pagesVisited.length;
for (pageVisitedIndex = 0; pageVisitedIndex < numberOfPagesVisited; pageVisitedIndex++)
{returnValue = returnValue + pagesVisited[pageVisitedIndex] + "\n";
}
return returnValue;}
function addPage(fileName)
{var fileNameStart = fileName.lastIndexOf("/") + 1;
fileName = fileName.substr (fileNameStart);
pagesVisited[pagesVisited.length] = fileName;
return true;}
//-->
</script>
</head>
<frameset cols="200,*" ID="MasterFrame">
<frame name="FrameLeft" src="menu_page.html">
<frame name="FrameRight" src="main_page.html">
</frameset><noframes></noframes>
</html>The menu page that'll appear in the left frame:
<html>
<head><title>menu_page.html</title>
<script language="JavaScript" type="text/javascript">
<!--
function choosePage_onchange()
{var choosePage = document.form1.choosePage;
var windowobject;
if (document.form1.radFrame[0].checked == true)
{windowobject = window.parent.FrameRight.FrameTop;
}
else
{windowobject = window.parent.FrameRight.FrameBottom;
}
windowobject.location.href = choosePage.options[choosePage.selectedIndex].value;
return true;}
//-->
</script>
</head>
<body>
<form name="form1">
Select frame<br />
Top <input name="radFrame" checked type="radio">
Bottom <input name="radFrame" type="radio">
<br /><br /><select name="choosePage" language="JavaScript" onchange="choosePage_onchange()">
<option value="page_a.html">Page A</option>
<option value="page_b.html">Page B</option>
<option value="page_c.html">Page C</option>
<option value="page_d.html">Page D</option></select>
</form></body>
</html>
The frameset that holds the two rows on the right-hand side of the page:
<html>
<head><title>main_page.html</title></head>
<frameset rows="*,*">
<frame name="FrameTop" src="page_a.html">
<frame name="FrameBottom" src="page_b.html">
</frameset><noframes></noframes>
</html>And now, the four pages that load in the two frames on the right:
<html>
<head><title>Frames and JavaScript Page A</title>
<script language="JavaScript" type="text/javascript">
<!--
function buttonShowVisited_onclick()
{document.form1.txtaPagesVisited.value = window.top.returnPagesVisited();
}
function setFrameAndPageControls(linkIndex)
{var formobject = window.parent.parent.FrameLeft.document.form1;
// or window.top.FrameLeft.document.form1
formobject.choosePage.selectedIndex=linkIndex;
if (window.parent.FrameTop == window.self)
{formobject.radFrame[0].checked=true;
}
else
{formobject.radFrame[1].checked=true;
}return true;
}
//-->
</script>
</head>
<body onload="window.top.addPage(window.location.href);">
<h1>This is Page A</h1>
<p>
<a href="page_a.html" name="pageALink" onclick="return setFrameAndPageControls(0)">Page A</a> |
<a href="page_b.html" name="pageBLink" onclick="return setFrameAndPageControls(1)">Page B</a> |
<a href="page_c.html" name="pageCLink" onclick="return setFrameAndPageControls(2)">Page C</a> |
<a href="page_d.html" name="pageDLink" onclick="return setFrameAndPageControls(3)">Page D</a>
</p><form name="form1">
<textarea rows="8" cols="35" name="txtaPagesVisited"></textarea>
<br />
<input type="button" value="List Pages Visited" name="buttonShowVisited" onclick="buttonShowVisited_onclick()">
</form></body>
</html>
Opening new windows via JavaScript
JavaScript's window object has an open() method that can be used to spawn new windows. The window.open() method takes three parameters: the URL of the page to open, the name property for this new window (similar to the value of the "target" attribute in an html tag like this: <a href="page2.html" target="mySecondWindow">, and whatever brower controls you want to implement. If you leave out the third attribute, the new window that opens has the same attributes as the parent window: same browser controls, window size, etc.
A working example of new windows page using the code below is here.
<html>
<head><title>Opening new windows</title>
<script language="JavaScript" type="text/javascript">
<!--
function newwindow_onload()
{var newWindow;
newWindow= window.open("http://www.mozilla.org","window2", "width=250,height=190,location=yes,menubar=yes,left=50,top=100");
// page 263 has a chart that shows available options for the 3rd parameter}
//--></script>
</head>
<body onload="newwindow_onload()">
<h1>Opening new windows</h1>
<!-- html uses the target attribute to open new windows, but doesn't give you much control beyond that -->
<a href="http://www.yahoo.com" target="newpage">yahoo</a><br />
<a href="http://www.google.com" target="newpage">google</a></body>
</html>