Some problem about HTML frameset

Question

Today i was trying to study about frameset by creating a few pages , this is how the site works , the frameset-defining page is divided into two separate child frame , and inside the two pages contain a textarea and a button that will print out the pages that are visited to the textarea when user click the button,the page is as follow:

The frameset-defining page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<title>Example</title>

<head>

<script type="text/javascript">

var siteList = new Array();

function returnPageVisited_onclick()
{
 var returnValue = "The pages you've visited : " + "\n"

 for(var i = 0 ; i < siteList.length ; i++)
 {
  returnValue += siteList[i] + "\n";
 }
 window.document.myForm.pageVisited.value = returnValue;
}

function printSiteLs_onload(fileNameStart)
{
 var pageName = fileNameStart.lastIndexOf("/") + 1;

 siteList[siteList.length] = fileNameStart.substr(pageName);
}

</script>


</head>



<frameset cols="50% , *">

 <frame src="pageA.html" name="fraLeft" />
 <frame src="pageB.html" name="fraRight" />

</frameset>


</html>

the frame page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<title>Example</title>

<head>
</head>

<body onload="window.parent.printSiteLs_onload(window.location.href);">

<h2> This is Page A </h2>

<p>

<a href="pageA.html">Page A</a>
<a href="pageB.html">Page B</a>
<a href="pageC.html">Page C</a>
<a href="pageD.html">Page D</a>

</p>

<form name="myForm">

<textarea name="pageVisited" rows="10" cols="35">
</textarea>

<input type="button" name="myBtn" value="Click To Check"    onclick="window.parent.returnPageVisited_onclick()"/>

<br />

</form>

</body>

</head>

</html>

There are another 3 pages which are coded the same as the frame page above,just the line <p> This is page A</p> is different , my problem is the line of code in the frameset-defining page ,that is window.document.myForm.pageVisited.value = returnValue; for the first function , firebug gave me an error "window.document.myForm is undefined",here is how I think,I'm using the frameset to create a module to store generic function so that other pages could access the function in it,but I wonder why I'm getting this error since the function is not called in the mainpage but is called in the frame pages where myForm is defined,so why am I still getting this kind of error,much appreciated if someone could correct my statement if I'm wrong thank you

Answer 1

The problem is, even though you are invoking 'returnPageVisited_onclick()' from with the frame page, when it runs, it does so in the scope of the frameset defining page. Under these circumstances 'window' refers to the frameset defining window, not the frame window.

What you need to do, to solve this, is to pass the form reference in to the function.

onclick="window.parent.returnPageVisited_onclick(this.form)"

...and then use that reference directly...

function returnPageVisited_onclick(targetForm)  
{  
   var returnValue = "The pages you've visited : " + "\n"  

   for(var i = 0 ; i < siteList.length ; i++)  
   {  
     returnValue += siteList[i] + "\n";  
   }  
   targetForm.pageVisited.value = returnValue;  
}  

Does this make sense?

UPDATE:

It looks like further explanation is required...

It all revolves around a thing called context, which is a point of reference from which all things are accessed.

To give a massively simplified explanation, imagine that you have 2 PCs with the same web page open on each. A piece of code is run that refers to a variable 'x'. You wouldn't expect the code on machine A to access the 'x' variable from machine 'B', or vice-versa. This is because there is an implied context, and that context is the machine that the code is running on.

To apply this concept to your example, when you refer to 'window', what your are implying is 'the current window' - i.e. the window in which the code is located. So, when your frame hosted page says...

window.parent

...it is explicitly providing a context that is equivalent to the window object of the frameset defining page. When this context is applied to the 'returnPageVisited_onclick' call, any references to 'window.document.myForm' are in that page, NOT in the frame hosted page. This then fails, as there is no form in the frameset defining page.

This is why I suggested that you pass the parameter into the function, as this parameter provides a context from which you can refer to the form.