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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
js调用flash的效果代码
Apr 26 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
js生成随机数方法和实例
Jan 17 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 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使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
js对象的构造和继承实现代码
2010/12/05 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
python的几种开发工具介绍
2007/03/07 Python
Python模块学习 re 正则表达式
2011/05/19 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python验证码识别处理实例
2015/12/28 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
python模块如何查看
2020/06/16 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
Java的五个基础面试题
2016/02/26 面试题
2014元旦晚会策划方案
2014/02/19 职场文书
给校长的建议书600字
2014/05/15 职场文书
纪检监察建议书
2014/05/19 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
企业百日安全活动总结
2015/05/07 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL