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 相关文章推荐
JavaScript中出现乱码的处理心得
Dec 24 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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文件怎么打开 如何执行php文件
2011/12/21 PHP
浅析php header 跳转
2013/06/17 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
Python线程指南详细介绍
2017/01/05 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Python lambda表达式用法实例分析
2018/12/25 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
Python解析json代码实例解析
2019/11/25 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
keras导入weights方式
2020/06/12 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
基于Python实现粒子滤波效果
2020/12/01 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
有针对性的求职自荐信
2013/11/14 职场文书
入股合作协议书
2014/10/12 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers