随着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来获取。见如下代码:

  1. <iframe id="iframe1" name=”iframe1” src="frame1.html"></iframe>
  2. <script type="text/javascript">
  3. //获取iframe的window对象
  4. var iframe = document.getElementById('iframe1').contentWindow;
  5. </script>

二、 在父页面中获取iframe的document对象

标准浏览器可以通过iframeElement.contentDocument来引用iframe的doument对象,但是IE浏览器(又是这斯…)不支持,确切说应该是IE 6/7,笔者发现在IE8中已经可以用此方法来获取了。

当然,因为document是window的一个子对象,你也可以先获取iframe的window对象,再通过window.document来引用。

总结:应使用以下两方法来获取,见代码:

  1. <iframe id="iframe1" src="frame1.html"></iframe>
  2. <script type="text/javascript">
  3. //获取iframe的document对象
  4. //方法1
  5. var iframe = document.getElementById('iframe1').contentWindow.document;
  6. //方法2
  7. function getIframeDom(iframeId) {
  8. return document.getElementById(iframeId).contentDocument || window.frames[iframeId].document;
  9. }
  10. </script>

三、 iframe页面获取父页面的window对象

parent:父页面window对象

top:顶层页面window对象

self:始终指向当前页面的window对象(与window等价)

适用于所有浏览器,当拿到了父页面的window对象后,就可以访问父页面定义的全局变量和函数,这在iframe交互里经常用到。

最新文章

  1. http cancelled状态与ajax 超时
  2. AngularJs的UI组件ui-Bootstrap分享(七)——Buttons和Dropdown
  3. go 准备
  4. 内核对TCP REUSEPORT的优化
  5. ADO.NET笔记——使用Command执行增删改操作,通过判断ExecuteNonQuery()返回值检查是否操作成功
  6. Agri Net POJ1258 &amp;&amp; Constructing Roads POJ2421
  7. TortoiseGit记住用户名和密码
  8. 20160327javaweb 之JSP入门
  9. ASP.NET MVC- Controllers and Routing- Routing
  10. linux下串口的阻塞和非阻塞操作
  11. Linux之特殊权限(SUID/SGID/SBIT)
  12. bzoj 2242 [SDOI2011]计算器 快速幂+扩展欧几里得+BSGS
  13. Cucumber启动类配置
  14. vs code 操作Git
  15. 微软已发布 Windows 10 Timeline 功能的官方 Chrome 插件
  16. react native出现 undefined is not a function_this4.错误函数无法识别
  17. 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
  18. CF1003E Tree Constructing 构造+树论
  19. Java-小技巧-002-String 转 long
  20. 远景平台开发者上线,专业API免费使用

热门文章

  1. CSS DIV 独占一行,清除左右两边的浮动
  2. 谷歌浏览器安装adblock广告屏蔽插件
  3. layoutSubviews #pragma mark -
  4. 大量查询SQL语句 实例
  5. Ubuntu 常用工具、指令安装
  6. 使用NPOI将TABLE内容导出到EXCEL
  7. js获取url中参数
  8. 引入RequireJS(一)
  9. Altium Designer 文档信息设置以及模板制作
  10. 下拉列表select显示ng-options