Js functions call each other in the frame

Cross-reference between frameworks

All frames in a page are provided as properties of window objects in the form of a collection. For example, window.frames represents the collection of all frames on the page. This is similar to form objects, link objects, picture objects, etc., except that these collections are properties of documents. Therefore, to refer to a subframe, use the following syntax:

window.frames["frameName"];
window.frames.frameName
window.frames[index]

The word "window" can also be replaced or omitted by self. If frameName is the first frame on the page, the following is equivalent:

self.frames["frameName"]
self.frames[0]
frames[0]
frameName

Each frame corresponds to an HTML page, so this frame is also a separate browser window, which has all the properties of a window. A reference to a frame is a reference to a window object. With this window object, you can easily manipulate the pages in it, such as writing data to the page using window.document object, and changing the pages in the frame using the window.location property.
The following are the cross-references between different hierarchical frameworks:

1. Parent frame to child frame reference
Knowing the above principle, it is very easy to refer to the child framework from the parent framework, that is:

window.frames["frameName"];

This references the frameName subframe on the page. If you want to refer to the subframe within the subframe, according to the nature that the frame referenced is actually the window object, you can achieve the following:

window.frames["frameName"].frames["frameName2"];

This refers to a second-level subframe, and by extension, a reference to a multilevel frame.

2. A reference from the child frame to the parent frame
Each window object has a parent attribute that represents its parent framework. If the framework is already a top-level framework, window.parent also represents the framework itself.

3. References between brother frames
If two frames are subframes of the same frame, they are called sibling frames and can be cross-referenced by the parent frame. For example, a page contains two subframes:

<frameset rows="50%,50%">
     <frame src="1.html" name="frame1" />
     <frame src="2.html" name="frame2" />
</frameset>

Frame1 can be referenced to frame2 using the following statement:

self.parent.frames["frame2"];

4. Cross-references between frameworks at different levels
The hierarchy of the framework is for the top-level framework. When there are different levels, as long as you know your level and the level and name of another framework, you can easily access each other by using the properties of window objects referenced by the framework, such as:

self.parent.frames["childName"].frames["targetFrameName"];

5. A reference to the top-level framework
Like the parent attribute, the window object also has a top attribute. It represents a reference to the top-level framework, which can be used to determine whether a framework is itself a top-level framework, for example:

//Determine whether the framework is a top-level framework
if(self==top){
       //dosomething
}

Change the loading page of the frame
A reference to the framework is a reference to the window object. The location property of the window object can be used to change the navigation of the framework, for example:
Window. The frames [0]. Location = "1. HTML";
This redirects the page of the first frame on the page to 1.html, and by taking advantage of this property, you can even use a link to update multiple frames.

<frameset rows="50%,50%">
     <frame src="1.html" name="frame1" />
     <frame src="2.html" name="frame2" />
</frameset>
<!--somecode-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">link</a>
<!--somecode-->

References JavaScript variables and functions within other frameworks
Before introducing techniques for referencing JavaScript variables and functions in other frameworks, let's look at the following code:

<script language="JavaScript" type="text/javascript">
<!--
function hello(){
      alert("hello,ajax!");
}
window.hello();
//-->
</script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<frameset cols="20%,80%">
      <frame src="link.html" name="link" />
      <frame src="show.html" name="show" />
</frameset>
</html>

Next to the item shown in show.html, you can add the following statement:
< A href = "void (0)" onclick = "self. Parent. Link. AddToOrders (32068)" > Add to cart < / a>
Where link represents the navigation framework, the arrOrders array is defined in the link. HTML page to store the id of the goods. The function addToOrders() is used to respond to the click of the [buy] link next to the goods. The parameter id it receives represents the id of the goods.

<script language="JavaScript" type="text/javascript">
<!--
var arrOrders=new Array();
function addToOrders(id){
      arrOrders.push(id);
}
//-->
</script>

In this way, arrOrders can be used on the checkout page or the shopping cart browsing page to get all the items to be purchased.
Framework can make a page divided into functionally independent modules, each module is independent of each other, but can be linked through the window object reference, is an important mechanism in Web development.