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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
JS高阶函数原理与用法实例分析
Jan 15 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
vant时间控件使用方法详解
Dec 24 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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
js格式化时间的方法
2015/12/18 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
工作失误检讨书范文大全
2014/01/13 职场文书
销售人员自我评价
2014/02/01 职场文书
大学新生入学教育方案
2014/05/16 职场文书
机关搬迁方案
2014/05/18 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
家访教师心得体会
2016/01/23 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
解决Oracle数据库用户密码过期
2022/05/11 Oracle