JavaScript framework programming

Use JavaScript frameworks
When talking about the window object, we mentioned that a webpage in the framework is also a window object, that is, the Frame object is also a window object. In the simplest case, each HTML file occupies a window object, including a webpage defining a framework ("framework webpage "). In IE, "<iframe>" is used to mark the framework inserted in the document as a window object, but "include webpage" is used (displayed as "<! -- Webbot bot = "include"... --> ") the HTML read does not occupy the window object alone. Every frame is a child object of the window object that contains its page (I do not know whether it should be called "attribute" or not). To reference it, you can use one of the following methods:
Window. frames [x]
Window. frames [frameName]
Window. frameName
X indicates the framework specified in the window object. Like other arrays, x starts from scratch. FrameName refers to the Framework name, which is the same as the "name" attribute in <frame>.

If the window object specified by window. frameName is a framework webpage, the method for referencing the framework is window. frameName. subFrameName. And so on.

Note that, no matter where the object is, all objects returned by referencing the "window" object are "current" window objects. If you want to access other window objects, you need to use the parent and top attributes. Parent refers to the "parent" window object, that is, the frame webpage that contains the current window object; top refers to the window object at the top of the window.

You should also pay close attention to the global variables and user-defined functions defined in your JavaScript. They all have their own -- the window object. To reference global variables or udfs in other frameworks, you must use "window objects. Framework objects [. Framework objects…]. Global variables or user-defined functions.

The above problem is often ignored when establishing a connection: if a default target window (<base target = "... ">) in <a href =" javascript :... ">, you must know that the entered JavaScript statement is run in the default target window. If necessary, add the" parent "and" top "attributes.

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:

1. Reference from parent framework to Child Framework
Knowing the above principles, it is very easy to reference the sub-framework from the parent framework, that is, 2. references from the sub-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:

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:

 

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

<Frameset rows = "50%, 50%">
<Frame src = "1.html"/>
<Frame src = "2.html"/>
</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
}
 
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"/>
<Frame src = "2.html"/>
</Frameset>
<! -- Somecode -->
<A href = "frame1.location3.html?frame2.location=4.html"> link </a>
<! -- Somecode -->
 
<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"/>
<Frame src = "show.html"/>
</Frameset>
</Html>
You can add a statement next to the item displayed in show.html:
<A href = "void (0)"> 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. In Ajax development, you can also use the hidden framework to implement various techniques. Later, we will introduce Ajax instance programming, and we will find that this technology will be used for refreshing new files and solving Ajax forward and backward problems.