[JavaScript]JavaScript处理iframe的动作
随着W3C一声令下,几年前使用非常频繁的frameset + frame已完成使命,光荣退伍。作为frameset的替代方案(姑且这么称吧),iframe的使用也多了起来。较frameset方案,iframe在使用上更加灵活,文档结构更加友好。
本文就js操作iframe在不同浏览器(没错,又是浏览器兼容…)的差异性做一些说明,力求总结出一个适应于所有主流浏览器的方案,笔者只测试了IE 6/7/8(以下简称IE)和FireFox 5.0(以下简称FF)。
约定与定义
iframeElement:指的是iframe的DOM元素表示,即用document.getElemenetById()等方法获取的DOM对象 iframeId: 指iframe的属性id,如<iframe id=”someid”> iframeName:指iframe的属性name,如<iframe name=”somename”> iframeIndex:从0开始编号的iframe索引,若页面中有N个frame,则其值范围为0 – n-1 iframeWindow:指的是iframe的window对象 标准浏览器:符合W3C标准的浏览器的统称,如FireFox
一、 在父页面中获取iframe的window对象
获得了window对象后,就可以调用iframe页面中定义的方法等。
IE:可以通过iframeId、window.iframeId、window.iframeName、 window.frames[iframeId]、window.frames[iframeName]、 window.frames[iframeIndex]和iframeElement.contentWindow这6种方法来获取iframe的 window对象。
FF:可以通过window.iframeName、window.frames[iframeName]和iframeElement.contentWindow这3种方法获取window对象。
总结:为了兼容大多数浏览器,应使用iframeElement.contentWindow来获取。见如下代码:
- <iframe id="iframe1" name=”iframe1” src="frame1.html"></iframe>
- <script type="text/javascript">
- //获取iframe的window对象
- var iframe = document.getElementById('iframe1').contentWindow;
- </script>
二、 在父页面中获取iframe的document对象
标准浏览器可以通过iframeElement.contentDocument来引用iframe的doument对象,但是IE浏览器(又是这斯…)不支持,确切说应该是IE 6/7,笔者发现在IE8中已经可以用此方法来获取了。
当然,因为document是window的一个子对象,你也可以先获取iframe的window对象,再通过window.document来引用。
总结:应使用以下两方法来获取,见代码:
- <iframe id="iframe1" src="frame1.html"></iframe>
- <script type="text/javascript">
- //获取iframe的document对象
- //方法1
- var iframe = document.getElementById('iframe1').contentWindow.document;
- //方法2
- function getIframeDom(iframeId) {
- return document.getElementById(iframeId).contentDocument || window.frames[iframeId].document;
- }
- </script>
三、 iframe页面获取父页面的window对象
parent:父页面window对象
top:顶层页面window对象
self:始终指向当前页面的window对象(与window等价)
适用于所有浏览器,当拿到了父页面的window对象后,就可以访问父页面定义的全局变量和函数,这在iframe交互里经常用到。
转载于:https://www.cnblogs.com/myblogslh/p/4922197.html
[JavaScript]JavaScript处理iframe的动作相关推荐
- 用javascript 动态改变iframe 的src 属性
原文地址为: 用javascript 动态改变iframe 的src 属性 <iframe id="xx"></iframe> <iframe id= ...
- [JavaScript] JavaScript数组挖掘,不只是讲数组哟(2)
课程来源:后盾人 上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟 数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
- JavaScript - JavaScript自定义弹出对话框
本脚本使用自定义的浮动窗口替代浏览器自己的对话框,效果非常不错.包含Error | Warning | Success | Prompt 四个对话框窗口 兼容性:IE6+ FireFox2+ Oper ...
- 了解JavaScript/JavaScript发展前景
目录 1. 什么是JavaScript 2. JavaScript能做什么 3.为什么要学习JavaScript? 前端领域JavaScript的组成 4. 常见问题 JavaScript和Java ...
- javascript访问frame,iframe框架和href的定向
一.frame 1.父框架到子框架的引用 知道了上述原理,从父框架引用子框架变的非常容易,即: window.frames["frameName"]; 这样就引用了页面内名为fra ...
- jQuery / JavaScript:访问iframe的内容
我想使用jQuery在iframe中操纵HTML. 我认为我可以通过将jQuery函数的上下文设置为iframe的文档来做到这一点,例如: $(function(){ //document ready ...
- 用javascript动态调整iframe高度
当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体.这时候你会设置 scrolling="no" ...
- 使用JavaScript下进行iframe的DOM操作(考虑浏览器兼容性)
今天碰到一个浏览器兼容性的问题,是IE和Firefox下iframe DOM操作的差异.本文借IE和Firefox在iframe DOM操作的不同,进行分析说明JavaScript在DOM操作中两者的 ...
- Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID,反之也行!...
query取得iframe中元素的几种方法 在iframe子页面获取父页面元素 代码如下: $('#objId', parent.document); // 搞定... 在父页面 获取iframe子页 ...
最新文章
- Spring Security 3.1 中功能强大的加密工具 PasswordEncoder
- pytorch loss function 总结
- python爬虫完整实例-python爬虫实例项目大全
- 用两张图告诉你,为什么你的App会卡顿?
- 传统IDC转型有了新思路 Zstack除了混合云还有托管云
- ML之DataScience:基于机器学习处理数据科学(DataScience)任务(数据分析、特征工程、科学预测等)的简介、流程、案例应用执行详细攻略
- linux 如何运行r脚本,Linux系统下如何debug R脚本
- NOIP2016普及组第四题——魔法阵
- C++ 11 深度学习(二) 命名空间简介、基本输入输出精解
- linux adb 端口,linux 无法连接adb 设备
- 【BZOJ-3123】森林 主席树 + 启发式合并
- docker创建镜像之Dockerfile
- 《机器人编程实战》一一1.2 给机器人指令
- LC-130 被环绕区域
- linux 关闭 vim配色方案,10 个你值得拥有的 Vim 配色方案
- ElastcSearch的Mapping映射建立
- 电脑关机同步服务器信息失败,电脑同步,更新时间失败,怎么处理?
- OpenWrt之DNS 测试工具(nslookup、dig)
- 通过fileProvider接收外部App传递文件路径的一些坑
- graphpad多条不同的曲线_GraphPad Prism