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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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
十天学会php之第三天
2006/10/09 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
PHP制作用户注册系统
2015/10/23 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
python3调用百度翻译API实现实时翻译
2018/08/16 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
工作表扬信
2015/01/17 职场文书
nginx优化的六点方法
2021/03/31 Servers
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers