JavaScript framework programming

Using JavaScript framework
When talking about the window object, we mentioned that a web page within a frame is also a window object, that is to say, the Frame object is also a window object. In the most understandable terms, each HTML file occupies a window object, including the web page that defines the frame ("frame web page"). In IE, the frame inserted in the document using the "d5ba1642137c3f32f4f4493ae923989c" tag is also a window object, but using the "include web page" method (shown as "46234f27a4675473951126d15097859b") The HTML read does not occupy a separate window object. Each frame is a sub-object of the window object that contains its page (I don’t know if it should be called a “property” or not). To reference it, you can use one of the following methods:

window.frames[x] 
window.frames['frameName'] 
window.frameName

Where, x refers to the frame specified in the window object. Like other arrays, x also starts from zero. frameName refers to the name of the frame, which is the same as the "name" attribute in 04a0d55efbbfd646a993fbc01f262c57.

If the window object specified using window.frameName is also a frame web page, then the method of referencing its frame: window.frameName.subFrameName. And so on.

It should be noted that no matter where the "window" object is referenced, what is returned is the "current" window object. If you want to access other window objects, you need to use the parent and top attributes. parent refers to the "parent" window object, which is the frame web page containing the current window object; top refers to the window object at the top of the window.

When using frameworks, you also need to pay close attention to the global variables and custom functions defined in your JavaScript. They all belong to the window object they belong to. To reference global variables or custom functions in other frameworks, you have to use the annoying method of "Window object.Frame object [.Frame object...].Global variables or custom functions".

The above problem is often ignored when establishing a connection: if a default target window is defined in 93f0f5c25f18dab9d176bd4f6de5d30e (4a48a61d5ed15a2d6bb68dc6f7d2f6b3), in d2b8064a4b6c64ec95748900c2431b88, you must know that the entered JavaScript statement is run in the default target window, and add some "parent" and "top" attributes if necessary.

Frame Programming Overview
An HTML page can have one or more sub-frames, which are marked with d5ba1642137c3f32f4f4493ae923989c and are used to display an independent HTML page. The framework programming discussed here includes self-control of frameworks and mutual access between frameworks, such as referencing JavaScript variables in another framework from one framework, calling functions in other frameworks, controlling the behavior of forms in another framework, etc.
Mutual references between frames

All frames in a page are provided in the form of a collection as attributes of the window object. For example: window.frames represents the collection of all frames in the page, which is the same as the form object , link objects, picture objects, etc. are similar, but the difference is that these collections are attributes of the document. Therefore, to reference a subframe, you can use the following syntax:

window.frames["frameName"]; 
window.frames.frameName 
window.frames[index]

Among them, the word window can also be replaced or omitted with self. Assuming that frameName is the first frame in the page, then the following The writing method is equivalent:

self.frames["frameName"] 
self.frames[0] 
frames[0] 
frameName

Each frame corresponds to an HTML page, so this frame is also an independent browser window, which has all the properties of the window, the so-called reference to the frame That is, a reference to the window object. With this window object, you can easily operate 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 page in the frame, etc.
The following introduces the mutual references between different levels of frameworks:
1. Reference from parent frame to child frame
Knowing the above principle, it is very easy to reference the child frame from the parent frame, that is:

window.frames["frameName"];

In this way, the frameName in the page is referenced. subframe. If you want to reference a subframe within a subframe, according to the nature of the referenced frame, which is actually the window object, it can be implemented like this:

window.frames["frameName"].frames["frameName2"];

In this way, the second-level subframe is referenced, and so on, References to multi-layer frameworks can be implemented.

2． Reference from child frame to parent frame
Each window object has a parent attribute that represents its parent frame. If the frame is already a top-level frame, window.parent also represents the frame itself.

3． References between sibling frames
If two frames are sub-frames of the same frame, they are called sibling frames. They can reference each other through the parent frame. For example, a page includes 2 sub-frames:

<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．不同层次框架间的互相引用
框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如：

self.parent.frames["childName"].frames["targetFrameName"];

5．对顶层框架的引用
和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：

//判断本框架是否为顶层框架 
if(self==top){ 
        //dosomething 
}

改变框架的载入页面
对框架的引用就是对window对象的引用，利用window对象的location属性，可以改变框架的导航，例如：

window.frames[0].location="1.html";

这就将页面中第一个框架的页面重定向到1.html，利用这个性质，甚至可以使用一条链接来更新多个框架。

<frameset rows="50%,50%"> 
      <frame src="1.html" /> 
      <frame src="2.html" /> 
</frameset> 
 
link 

引用其他框架内的JavaScript变量和函数
在介绍引用其他框架内JavaScript变量和函数的技术之前，先来看以下代码：

<script language="JavaScript" type="text/javascript"> 
<!-- 
function hello(){ 
       alert("hello,ajax!"); 
} 
window.hello(); 
//--> 
</script>

如果运行了这段代码，会弹出“hello,ajax!”的窗口，这正是执行hello()函数的结果。那为什么hello()变成了window对象的方法呢？因为在一个页面内定义的所有全局变量和全局函数都是作为window对象的成员。例如：

var a=1; 
alert(window.a);

就会弹出对话框显示为1。同样的原理，在不同框架之间共享变量和函数，就是要通过window对象来调用。
例如：一个商品浏览页面由两个子框架组成，左侧表示商品分类的链接；当用户单击分类链接时，右侧显示相应的商品列表；用户可以单击商品旁的【购买】链接将商品加入购物车。
在这个例子中，可以利用左侧导航页面来存储用户希望购买的商品，因为当用户单击导航链接时，变化的是另外一个页面，即商品展示页面，而导航页面本身是不变的，因此其中的JavaScript变量不会丢失，可以用来存储全局数据。其实现原理如下：
假设左侧页面为link.html，右侧页面为show.html，页面结构如下：

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

在show.html中展示的商品旁边可以加入这样一条语句：
c1ba1ea4878f2b42a964bd1212cd44d8加入购物车5db79b134e9f6b82c0b36e0489ee08ed
其中link表示导航框架，在link.html页面中定义了arrOrders数组来存储商品的id，函数addToOrders()用来响应商品旁边【购买】链接的单击事件，它接收的参数id表示商品的id，例子中是一个id为32068的商品：

<script language="JavaScript" type="text/javascript"> 
<!-- 
var arrOrders=new Array(); 
function addToOrders(id){ 
       arrOrders.push(id); 
} 
//--> 
</script>

这样，在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。
框架可以使一个页面划分为功能独立的多个模块，每个模块之间彼此独立，但又可以通过window对象的引用来建立联系，是Web开发中的一个重要机制。在Ajax开发中，还可以利用隐藏框架实现各种技巧，在后面介绍Ajax实例编程时可以发现，无刷新上传文件以及解决Ajax的前进后退问题都会用到这种技术。