Change the loading page of the framework
A reference to a frame is a reference to a window object. Using the location property of the window object, you can change the navigation of the frame, for example:
[0].location="";
This redirects the page of the first frame in the page to, taking advantage of this nature, you can even use a link to update multiple frames.
<frameset rows="50%,50%">
<frame src="" />
<frame src="" />
</frameset>
<!--somecode-->
<a href="=';=''" >link</a>
<!--somecode-->
Reference JavaScript variables and functions within other frameworks
Before introducing the techniques of referencing JavaScript variables and functions within other frameworks, let's take a look at the following code:
<script language="JavaScript" type="text/javascript">
<!--
function hello(){
alert("hello,ajax!");
}
();
//-->
</script>
If you run this code, a window of "hello,ajax!" will pop up, which is the result of executing the hello() function. Then why does hello() become a method of window object? Because all global variables and global functions defined in a page are members of the window object. For example:
var a=1;
alert();
A dialog box will pop up and display it as 1. By the same principle, sharing variables and functions between different frameworks means calling them through window objects.
For example: a product browsing page consists of two subframes, and the left side indicates the link to the product classification; when the user clicks the classification link, the corresponding product list is displayed on the right side; the user can click the [Purchase] link next to the product to add the product to the shopping cart.
In this example, the left navigation page can be used to store the products the user wants to purchase, because when the user clicks the navigation link, another page is changed, that is, the product display page, and the navigation page itself is unchanged, so the JavaScript variables in it will not be lost and can be used to store global data. The implementation principle is as follows:
Assuming that the page on the left is and the page on the right is, 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="" />
<frame src="" />
</frameset>
</html>
You can add a sentence like this next to the product displayed in it:
<a href="void(0)" >Add to cart</a>
where link represents the navigation framework, and the arrOrders array is defined in the page to store the product's id. The function addToOrders() is used to respond to the click event of the [Purchase] link next to the product. The parameter id it receives represents the product's id. In the example, a product with an id of 32068:
<script language="JavaScript" type="text/javascript">
<!--
var arrOrders=new Array();
function addToOrders(id){
(id);
}
//-->
</script>
In this way, you can use arrOrders to obtain all the items you are ready to purchase on the checkout page or the shopping cart browsing page.
A framework can divide a page into multiple modules with independent functions, each module is independent of each other, but it can also establish connections through references to window objects, which is an important mechanism in web development. In Ajax development, you can also use hidden frameworks to implement various techniques. When introducing Ajax instance programming later, you can find that this technology will be used to upload files without refresh and solve Ajax forward and backward problems.