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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
js onclick事件传参讲解
Nov 06 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 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
smarty的保留变量问题
2008/10/23 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
layui实现table加载的示例代码
2018/08/14 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
python生成指定长度的随机数密码
2014/01/23 Python
python中sleep函数用法实例分析
2015/04/29 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
学习心得体会
2014/01/01 职场文书
倡议书格式
2014/04/14 职场文书
党委班子对照检查材料
2014/08/19 职场文书
员工生日活动方案
2014/08/24 职场文书
科学发展观标语
2014/10/08 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
python关于集合的知识案例详解
2021/05/30 Python