JavaScript framework of iframe operation summary

Framework programming overview

An HTML page can have one or more subframes that are defined by < Iframe> To display a separate HTML page. The framework programming covered here includes the framework's self-control and mutual access between frameworks, such as referencing JavaScript variables in one framework from another, calling functions in other frameworks, controlling the behavior of forms in another framework, and so on.

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 using the window.document object to write data to the page, using the window.location property to change the pages in the frame, and so on.

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.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-->

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.

var arrOrders=new Array();
function addToOrders(id){
    arrOrders.push(id);
}

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. In Ajax development, you can also use hidden frameworks to implement various techniques, as you'll see later in the Ajax example programming section, both without refreshing the upload file and to solve the Ajax forward/backward problem.