JS framework object and methods or attributes in the framework object

From: http://lillian1205.javaeye.com/blog/558057

 

 

Framework programming Overview
An HTML page can have one or more child frameworks marked with <IFRAME> to display an independent HTML page. The framework programming mentioned here includes framework self-control and mutual access between frameworks, for example, you can reference JavaScript variables in another framework from one framework, call functions in another framework, and control the form behavior in another framework.

Mutual reference between frameworks
All frames on a page are provided as properties of the window object in the form of a set, for example, window. frames indicates the set of all frames on the page. This is similar to form objects, link objects, and image objects. The difference is that these sets are the attributes of document. Therefore, to reference a sub-framework, you can use the following syntax:
Window. Frames ["framename"];
Window. frames. framename
Window. Frames [Index]
The window can also be replaced or omitted by self. If framename is the first frame on the page, the following statements are equivalent:
Self. Frames ["framename"]
Self. Frames [0]
Frames [0]
Framename
Each framework corresponds to an HTML page, so this framework is also an independent browser window, which has all the properties of the window. The so-called reference to the framework is also a reference to the window object. With this windowless object, you can easily perform operations on the page. For example, you can use the volume upload Doc ument object to write data to the page, and use the window. Location attribute to change pages in the framework.
The following describes the mutual references between frameworks of different levels:
1. Reference from parent framework to Child Framework
With the above principles, it is very easy to reference the sub-framework from the parent framework, that is:
Window. Frames ["framename"];
In this way, the sub-framework named framename in the page is referenced. If you want to reference the sub-framework in the sub-framework, the referenced framework is actually the nature of the window object, which can be implemented as follows:
Window. Frames ["framename"]. Frames ["framename2"];
In this way, the second-level sub-framework can be referenced, and so on.
2. references from the Child Framework to the parent framework
Each window object has a parent attribute, indicating its parent framework. If the framework is already a top-level framework, window. Parent also indicates the framework itself.
3. Reference between sibling frameworks
If the two frameworks are the same as the Child frameworks of the same framework, they are called the sibling frameworks, you can use the parent framework to reference each other. For example, a page contains two child frameworks:
<Frameset rows = "50%, 50%">
<Frame src = "1.html" name = "frame1"/>
<Frame src = "2.html" name = "frame2"/>
</Frameset>
In frame1, you can use the following statement to reference frame2:
Self. Parent. Frames ["frame2"];
4. Mutual reference between frameworks of different levels
The framework layer is for the top-level framework. When the layers are different, you only need to know your own layers and the layers and names of another framework, and use the window object properties referenced by the Framework to easily implement mutual access. For example:
Self. Parent. Frames ["childname"]. Frames ["targetframename"];
5. Reference to the top-level framework
Similar to the parent attribute, the window object also has a top attribute. It indicates a reference to the top-level framework, which can be used to determine whether a framework itself is 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 framework
The reference to the framework refers to the reference to the window object. The location attribute of the window object can be used to change the navigation of the Framework. For example:
Window. Frames [0]. Location = "1.html ";
In this case, the page of the first frame in the page is redirected to 1.html. 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 -->
Reference JavaScript variables and functions in other frameworks
Before introducing the 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>
If you run this code, "Hello, Ajax!" will pop up !" Window, which is the result of executing the hello () function. So why does Hello () become a window object method? Because all global variables and global functions defined in a page are members of the window object. For example:
VaR A = 1;
Alert (window. );
The dialog box is displayed as 1. In the same principle, variables and functions are shared between different frameworks and called through window objects.
For example, a product browsing page consists of two sub-frameworks. The left side shows the product category link. When a user clicks the category link, the corresponding product list is displayed on the right; you can click the buy link next to the item to add the item to the shopping cart.
In this example, you can use the left navigation page to store the items you want to purchase, because when you click the navigation link, another page is changed, that is, the product display page, the navigation page itself remains unchanged, so the Javascript variables are not lost and can be used to store global data. The implementation principle is as follows:
Assume that the left side is link.html, and the right side is show.html. The page structure is as follows:
<! 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>
You can add a statement next to the item displayed in show.html:
<A href = "void (0)" onclick = "self. Parent. Link. addtoorders (32068)"> Add to shopping cart </a>
In the linklinks navigation framework, the arrorders array is defined on the link.html page to store the product ID. The addtoorders () function is used to respond to the Click Event of the [buy] link next to the product. The parameter ID it receives indicates the product ID, in this example, a product with the ID of 32068 is used:
<Script language = "JavaScript" type = "text/JavaScript">
<! --
VaR arrorders = new array ();
Function addtoorders (ID ){
Arrorders. Push (ID );
}
// -->
</SCRIPT>
In this way, you can use arrorders on the checkout page or the shopping cart browsing page to obtain all the items to be purchased.
The framework divides a page into multiple modules with independent functions. Each module is independent from each other. However, it can be linked by referencing window objects, which is an important mechanism in Web development.

If your frameset code is as follows:
<Frameset name = "theframeset" rows = "100, *">
<Frame name = "topframe" src = "top.htm">
<Frame name = "downframe" src = "down.htm">
</Frameset>

You can use parent. theframeset. rows = "300, *" to change the top.htm1_down.htm. It is mainly used to set a name attribute for frameset to reference it.

 

// Var openis = top. Window. Frames ["iframe"]. alerttest (); // directly call the alerttest () method on the page named IFRAME.