框架编程概述
一个HTML页面可以有一个或多个子框架，这些子框架以<iframe>来标记，用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。

框架间的互相引用
一个页面中的所有框架以集合的形式作为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属性来改变框架内的页面等。
下面分别介绍不同层次框架间的互相引用：
1．父框架到子框架的引用
知道了上述原理，从父框架引用子框架变的非常容易，即：
window.frames["frameName"];
这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架，根据引用的框架实际就是window对象的性质，可以这样实现：
window.frames["frameName"].frames["frameName2"];
这样就引用到了二级子框架，以此类推，可以实现多层框架的引用。
2．子框架到父框架的引用
每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent还表示该框架本身。
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"];
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" name="frame1" />
     <frame src="2.html" name="frame2" />
</frameset>
<!--somecode-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">link</a>
<!--somecode-->
引用其他框架内的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" 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开发中的一个重要机制。

 
http://jackyyangqi.bokee.com/6706002.html

js函数在frame中的相互的调用的更多相关文章

  1. js函数在frame中的相互调用详解

    原文章:http://www.jb51.net/article/47557.htm   一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTM ...

  2. 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Li ...

  3. knockout.js(js)代码在IE中出现“意外地调用了方法或属性”的错误

    var CartListViewModel = function () { var self = this; self.payment = [ { name: "", value: ...

  4. 在动态THML语句中调用JS函数传递带空格参数的问题

    刚刚遇到一个问题,调用js函数的参数里带空格,造成调用失败的问题.   部分代码如下: html+="<div><a href=javascript:confirm(&qu ...

  5. Node.js 函数

    Node.js 函数 在JavaScript中,一个函数可以作为另一个函数接收一个参数.我们可以先定义一个函数,然后传递,也可以在传递参数的地方直接定义函数. Node.js中函数的使用与Javasc ...

  6. Node.js函数

    Node.js 函数 在JavaScript中,一个函数可以作为另一个函数的参数.我们可以先定义一个函数,然后传递,也可以在传递参数的地方直接定义函数. Node.js中函数的使用与Javascrip ...

  7. AS与JS相互通信(Flex中调用js函数)

    转载自http://www.blogjava.net/Alpha/archive/2009/06/27/284373.html Flex中As调用Js的方法是:     1.导入包 (import f ...

  8. 深入理解JS函数中this指针的指向

    函数在执行时,会在函数体内部自动生成一个this指针.谁直接调用产生这个this指针的函数,this就指向谁. 怎么理解指向呢,我认为指向就是等于.例如直接在js中输入下面的等式: console.l ...

  9. js高级程序设计书中，有一句话在全局作用域中定义的函数实际上只 能被某个对象调用？？？

    js没有块级作用域(题外话:函数可以作为一个块级),所以我们经常使用闭包来模拟块级作用域,以避免变量或者函数因为名称相同而产生的冲突. 重点来了: 所以,如果我们把哪个变量或者函数放在全局作用域中,那 ...

随机推荐

  1. Win10内置应用恢复初始状态

    和Win8/Win8.1相同,Win10也内置了很多默认Windows应用,比如计算器.天气.人脉.Groove音乐.电影和电视.邮件和日历.Edge浏览器等.一般情况下,这些应用不会有太大的问题,但 ...

  2. C#生成二维码的内容

    生成二维码的内容 using QRCoder; // 生成二维码的内容 string strCode = this.txtQr.Text.Trim(); if (string.IsNullOrWhit ...

  3. C#委托的好处

    C#委托的好处 先来看一个例子: 某人有三子,让他们各自带一样东西出门,并带回一头猎物. 可以理解为一种父亲对儿子的委托: 猎物  办法(工具 某工具) 三个人执行委托的方法各不相同 兔子 打猎(工具 ...

  4. mysql多表条件更新

    有两张表bas_student.bas_householder, 去除学生表中与家长表重复的手机号 UPDATE bas_student a,bas_householder b SET a.mobil ...

  5. C#学习笔记12

    1.在使用反射时,反射可以绕过安全访问级别(private.protected)修饰的类或属性,来获取需要的信息. 2.泛型的反射:可以使用Type.ContainsGenericParameters ...

  6. C# 读写xml、excel、word、ppt、access

    C# 读写xml.excel.word.access 这里只是起个头,不做深入展开,方便以后用到参考 读写xml,主要使用.net  的xml下的document using System;using ...

  7. 用C#实现工资计算公式动态编写

    1,工资计算公式 每一个企业都一定会用到工资计算,发工资是一件非常神圣的事情,而计算工资就是一项非常重要的工作.Excel有非常强大的公式功能,帮助了很多财务人员计算工资,但如果企业的人数比较多,而且 ...

  8. apk接入google play邮箱登陆及充值注意事项

    unity3d 接入google play商店相关sdk,相关要求A.环境配置: 1.手机安装谷歌安装器 2.使用谷歌安装器安装Google 服务框架.Google Play服务.Google Pla ...

  9. android 自定义

    初级: 1.Android自定义View之一:初探实例 ——> onDraw 2.getwidth和getmeasuredwidth的区别以及两者的使用场景 3.Android 自定义View ...

  10. 【转】dB的计算方法

    原文地址:https://www.espressif.com/zh-hans/media/blog/%E5%A2%9E%E7%9B%8A%E6%AF%94%E5%80%BC-db-%E4%BB%A5% ...