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 相关文章推荐
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
通过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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
bootstrap警告框示例代码分享
2017/05/17 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Python读取Excel的方法实例分析
2015/07/11 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
final, finally, finalize的区别
2012/03/01 面试题
小学运动会表扬稿
2014/01/19 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
婚前财产协议书范本
2014/10/19 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
学校运动会感想
2015/08/10 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏