1 框架编程概述
一个Html 页面可以有一个或多个子框架，这些子框架以<iframe>来标记，用来显示一
个独立的Html 页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，
例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一
个框架中表单的行为等。
2 框架间的互相引用
一个页面中的所有框架以集合的形式作为window 对象的属性提供，例如：
window.frames 就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是
类似的，不同的是，这些集合是document 的属性。因此，要引用一个子框架，可以使用如
下语法：
window.frames[“frameName”];
window.frames.frameName
window.frames[index]
其中，window字样也可以用self代替或省略，假设frameName 为页面中第一个框架，
则以下的写法是等价的：
self.frames[“frameName”]
self.frames[0]
frames[0]
frameName
了解了如何引用一个框架，那么引用的这个框架到底是什么呢？其实，每个框架都对应
一个HTML 页面，所以这个框架也是一个独立的浏览器窗口，它具有窗口的所有性质，所
谓对框架的引用也就是对window 对象的引用。有了这个window 对象，就可以很方便地对
其中的页面进行操作，例如使用window.document对象向页面写入数据、使用window.location
属性来改变框架内的页面等。
下面分别介绍不同层次框架间的互相引用：
2.1．父框架到子框架的引用
知道了上述原理，从父框架引用子框架变的非常容易，即：
window.frames[“frameName”];
这样就引用了页面内名为frameName 的子框架。如果要引用子框架内的子框架，根据
引用的框架实际就是window对象的性质，可以这样实现：
window.frames[“frameName”].frames[“frameName2”];
这样就很引用到了二级子框架，以此类推，可以实现多层框架的引用。
2.2．子框架到父框架的引用
每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，
则window.parent 还表示该框架本身。
2.3．兄弟框架间的引用
如果两个框架同为一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相
引用，例如一个页面包括2 个子框架：
<frameset rows="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>
在frame1 中可以使用如下语句来引用frame2：
self.parent.frames[“frame2”];
2.4．不同层次框架间的互相引用
框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一
个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，
例如：
self.parent.frames[“childName”].frames[“targetFrameName”];
2.5．对顶层框架的引用
和parent 属性类似，window 对象还有一个top 属性。它表示对顶层框架的引用，这可
以用来判断一个框架自身是否为顶层框架，例如：
//判断本框架是否为顶层框架
if(self==top){
//dosomething
}
3 改变框架的载入页面
前面已经讲到，对框架的引用就是对window对象的引用，利用window对象的location
属性，可以改变框架的导航，例如：
window.frames[0].location=”1.html”;
这就将页面中第一个框架的页面重定向到1.html，利用这个性质，甚至可以使用一条链
接来更新多个框架。
<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-->
4 引用其他框架内的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变量不会丢失，可以用来存储全局数据。其实现原理如下：
假设左侧页面为links.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" name="link" />
<frame src="show.html" name="show" />
</frameset>
</html>
在show.html 中展示的商品旁边可以加入这样一条语句：
<a href=”void(0)” onclick=”self.parent.link.addToOrders(32068)”>加入购物车</a>
其中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的前进后退问题都会用到这种技术。
分享到：
相关推荐
•有任何数据库编程基础2天内即可轻松上手 •Java、.Net、PHP模型互通，学会一种、掌握两种，最大限度为用户节省跨平台成本 •支持Oracle、SqlServer、MySQL数据库模型，轻松解决跨数据库难题 完善的企业级框架...
Efs Frame企业级开发框架2.0源码 EfsFrame企业级框架--.Net开发实例模型源码 Efsframe框架特点如下： 1、完善的Web表现层开发包：为企业Web表现层开发人员提供的一套完整、高效、美观的B/S结构设计表现层解决方案...
3.4.1 字符串对象 3.4.2 日期对象 3.5 桢结构和框架窗口(Frame,IFrame) 3.5.1 了解链接的Target 属性 3.5.2 由JavaScript，在不同的桢( 窗口) 间访问对象 3.5.3 了解IFrame 4 正则表达式和...
使用JavaScript框架 在讲述 window 对象的时候，我们提到过，一个框架内的网页也是 window 对象，也就是说，Frame 对象也是 window 对象。用最容易理解的话说，每一个 HTML 文件占用一个 window 对象，...
己的需求，以及如何实现客户端与服务器的无缝通信，而又不必求助于 Java 或隐藏的网页框架（frame 元素）。一言以蔽之，本书将教会你在面对各种常见的 Web 开发问题时，如何拿出自己的 JavaScript 解 决方案。
一个HTML页面可以有一个或多个子...iframe>...这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等
这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。 框架间的互相引用 一个页面中的所有框架...
•有任何数据库编程基础2天内即可轻松上手 •Java、.Net、PHP模型互通，学会一种、掌握两种，最大限度为用户节省跨平台成本 •支持Oracle、SqlServer、MySQL数据库模型，轻松解决跨数据库难题 完善的企业级框架...
本项目是我锻炼基本编程水平的代码库，实现的功能早已有相关框架或工具所支持，如MVC，CDI，json解析等，这属于“重复造轮子”，在实际项目中更多的还是选用工业标准的第三方软件，事实上我模仿的框架就是Spring，...
成为专业程序员路上用到的各种优秀资料、神器及框架 Web前端入门和进阶学习笔记 Algorithm Visualizer 算法展示 大前端面试宝典 - 图解前端 IntelliJ IDEA 的技巧仓库 精选前端开发的各类文章 前端乐园 周刊 由腾讯...
A-Frame 是一个用来构建虚拟现实（VR）应用的网页开发框架。A-Frame基于HTML，容易上手。但是A-Frame不仅仅是一个3D场景渲染引擎或者一个标记语言。其核心思想是基于Three.js来提供一个声明式、可扩展以及组件化的...
1.3 JavaScript编程起步 1.3.1 “Hello World！”程序 1.3.2 选择JavaScript脚本编辑器 1.4 如何引入JavaScript脚本代码 1.4.1 通过[removed]与[removed]标记对引入 1.4.2 通过[removed]标记的src属性引入 1.4.3 ...
1.3 JavaScript编程起步 1.3.1 “Hello World！”程序 1.3.2 选择JavaScript脚本编辑器 1.4 如何引入JavaScript脚本代码 1.4.1 通过与标记对引入 1.4.2 通过标记的src属性引入 1.4.3 通过JavaScript伪URL引入 1.4.4 ...
网站后台是每个网站必须的部分，使用一个好的框架也是给用户良好体验的一部分内容，本文将给大家介绍使用JQuery和JS实现的ASP.NET网站后台框架。实现一个像IE 8中Tab页一样的功能，这个可以方便用户在一个浏览器页面...
13.3 处理窗口事件或框架事件 13.3.1 onLoad和onUnLoad事件 13.3.2 onFocus和onBlur事件函数 13.3.3 onResize事件处理函数 13.4 鼠标事件处理 13.4.1 怎样使用鼠标事件 13.4.2 ...
JFrame降低了软件开发人员的要求，开发人员也无需掌握太多的编程知识，只需掌握Java与JavaScript基础知识，就可在平台上进行二次开发。TJFrame的目标是：“直接降低软件企业80%的研发成本，缩短项目开发发周期，...
功能强大的JavaScript日历控件 最关键的，无偿的永久的提供给大家免费使用，含全部源代码。 功能简介： 一、更人性化,更全面的功能 ...注意:默认情况下是关闭的,开启方法:WdatePicker.js中的$crossFrame=true
2.1.3框架<frame>和框架集<frameset>` 二.css 1.这个用来设置标签样式有好处 采用外部样式设置页面一来可以减少代码的瘫肿；二来可以时开发页面分离，使得不同的界面设计师可以设置同一个界面 每一个属性由属性...
注意：如果教室设置允许，那么本课程的第一部分将是与学生一起编程的一个很好的练习，每个学生都克隆了自己的副本并在本地工作。 目标 在本讲座中，我们将进一步探讨ECS范式的前两个元素：实体和组件。 具体来说，...