The mutual invocation of JS function in frame

Original article: http://www.jb51.net/article/47557.htm an HTML page can have one or more child frames, which are tagged with <iframe> to display a separate HTML page. The framework programming described here includes self-control of the framework and mutual access between frames, such as referencing JavaScript variables in another frame from one frame, invoking functions within other frames, controlling the behavior of forms in another frame, etc.

Cross-referencing between frames
All frames in a page are provided as a collection of properties for the Window object, for example: Window.frames represents a collection of all frames within that page, similar to form objects, linked objects, picture objects, and so on, which are attributes of the document. Therefore, to reference a child frame, you can use the following syntax:

The code is as follows: window.frames["FrameName"]; Window.frames.frameName Window.frames[index]

Where the Word window can also be replaced or omitted with self, assuming that FrameName is the first frame in the page, the following notation is equivalent:

The code is as follows: self.frames["FrameName"] self.frames[0] frames[0] FrameName

Each frame corresponds to an HTML page, so the framework is also a separate browser window that has all the properties of the window, and the so-called reference to the frame is a reference to the Window object. With this Window object, you can easily manipulate the pages in it, such as using the Window.document object to write data to the page, using the Window.location property to change the pages within the frame, and so on. The following sections describe the mutual references between different levels of frames:

1. The reference to the parent frame to the child frame knows the above principle, and it is very easy to refer to the child frame from the parent frame, namely:

The code is as follows: window.frames["FrameName"];

This refers to a child frame named FrameName within the page. If you want to refer to a child frame within a child frame, according to the referenced frame is actually the nature of the Window object, you can do this:

Copy CodeThe code is as follows: window.frames["FrameName"].frames["frameName2"]; this refers to the level two sub-framework, and so on, you can implement a multi-layered framework reference.

2. References to the parent frame of a child frame each window object has a parent property that represents its parents frame. If the frame is already a top-level frame, window.parent also represents the framework itself.

3. Sibling references between frames if the two frames are the same as a frame's sub-framework, they are called sibling frames, and can be referenced through the parent framework, such as a page consisting of 2 sub-frames:

Copy CodeThe code is as follows: <frameset rows= "50%,50%" > <frame src= "1.html" name= "frame1"/> <frame src= "2.html" Name= "fra Me2 "/> </frameset>

In Frame1, you can use the following statement to refer to frame2:

Copy CodeThe code is as follows: self.parent.frames["frame2"];

4. The hierarchy of cross-referencing frames between different levels of frames is for the top-level framework. When the hierarchy is different, you can easily access each other by the nature of the window object referenced by the framework, as long as you know your level and the hierarchy and name of another frame, for example:

Copy CodeThe code is as follows: self.parent.frames["ChildName"].frames["Targetframename"];

5. The reference to the top-level frame is similar to the parent property, and the Window object has a top property. It represents a reference to the top-level frame, which can be used to determine whether a frame itself is a top-level frame, for example:

Copy CodeThe code is as follows://Determine if the frame is a top-level frame if (self==top) {//dosomething}

Changing the frame's load page reference to the frame is a reference to the Window object, using the Window object's Location property, you can change the frame navigation, for example: window.frames[0].location= "1.html"; This redirects the page of the first frame in the page to 1.html, and with this nature, you can even update multiple frames with a single link.

Copy CodeThe code is as follows: <frameset rows= "50%,50%" > <frame src= "1.html" name= "frame1"/> <frame src= "2.html" Name= "fra Me2 "/> </frameset> <!--somecode--> <a href=" frame1.location= ' 3.html;frame2.location= ' 4.html ' " onclick= "" >link</a> <!--somecode-->

referencing JavaScript variables and functions in other frameworks before introducing techniques for referencing JavaScript variables and functions within other frameworks, look at the following code:

Copy CodeThe code is as follows: <script language= "JavaScript" type= "Text/javascript" > <!--function Hello () {alert ("hello,ajax!");} W Indow.hello (); -</script>

If you run this code, it will pop up "hello,ajax!" window, which is exactly the result of executing the hello () function. So why does hello () become the method of the Window object? Because all global variables and global functions defined within a page are members of the Window object. For example:

Copy CodeThe code is as follows: Var a=1; alert (WINDOW.A); The popup dialog appears as 1. The same principle, the sharing of variables and functions between different frameworks is to be called through the Window object. For example: A product browsing page consists of two sub-frames, the left side represents the link of the product category, when the user clicks the category link, the right side displays the corresponding product list; The user can click the "Buy" link next to the item to add the item to the cart. In this example, you can use the left navigation page to store the product that the user wants to buy, because when the user clicks the navigation link, the other page is changed, namely the product Display page, and the navigation page itself is immutable, so the JavaScript variables are not lost and can be used to store global data. Its implementation principle is as follows: Suppose the left page is link.html, the right page is show.html, the page structure is as follows:

Copy CodeThe code is as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >

You can add a statement next to the item shown in show.html: <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 product ID, and the function addtoorders () is used to respond to the Click event of the "buy" link next to the item, which receives the ID of the item, The example is an item with an ID of 32068:

Copy CodeThe code is as follows: <script language= "JavaScript" type= "Text/javascript" > <!--var arrorders=new Array (); function Addtoorders (ID) {Arrorders.push (ID)}//--> </script> in this way, you can use Arrorders to get all the items you are ready to buy on the checkout page or in the Shopping Cart browsing page. The framework can divide a page into multiple, functionally independent modules, each of which is independent of each other, but can be linked by a reference to a Window object, which is an important mechanism in web development.

The mutual invocation of JS function in frame