javascript iframe编程相关代码


Posted in Javascript onDecember 28, 2009

最近在处理几个项目中都用到了iframe,有时一个页面中有多个iframe,而且几个iframe需要相互访问彼此的函数或者父窗口的函数。今天有空就将页面框架编程做个整理。
一个页面中的所有框架以集合的形式作为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 
}
Javascript 相关文章推荐
Jquery异步请求数据实例代码
Dec 28 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
通过javascript设置css属性的代码
Dec 28 #Javascript
JavaScript的public、private和privileged模式
Dec 28 #Javascript
Javascript 面向对象特性
Dec 28 #Javascript
extJs 常用到的增,删,改,查操作代码
Dec 28 #Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 #Javascript
javascript 显示当前系统时间代码
Dec 28 #Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 #Javascript
You might like
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
python 求10个数的平均数实例
2019/12/16 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
俄语专业毕业生推荐信
2013/10/28 职场文书
新领导上任欢迎词
2014/01/13 职场文书
项目投资意向书
2014/04/01 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
2014年班主任工作总结
2014/11/08 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书