随着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交互里经常用到。

后记

iframe父页面和子页面相互调用的方法的更多相关文章

  1. iframe父窗口和子窗口的调用方法

    iframe 父窗口和子窗口的调用方法父窗口调用子窗口 iframe_name.iframe_document_object.object_attribute = attribute_value 例子 ...

  2. HTML中IFrame父窗口与子窗口相互操作

    一.Iframe篇 //&&&&&&&&&&&&&&&&&&am ...

  3. Iframe父页面与子页面之间的相互调用

    iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...

  4. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

  5. js里父页面与子页面的相互调用

    一.在页面里用 open 打开的子页面: 1.子页面调用父页面的方法,包括子页面给父页面传值: window.opener.methodName(); window.opener.methodName ...

  6. 使用iframe父页面调用子页面和子页面调用父页面的元素与方法

    在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...

  7. JQuery操作iframe父页面与子页面的元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...

  8. 使用layer 弹出对话框 子父页面相互参数传递 父页面获取子页面参数实例

    一.先看效果: 1.点击三个点的图标弹出了子页面: 2.子页面调用父页面方法,图一调用父页面方法,图二得到父页面var变量.           3.选择之后,关闭弹框,父页面得到子页面单选框选择的v ...

  9. ifram父页面、子页面元素及方法的获取调用

    page1 父页面 <div id="ifram" class="parent1"> <iframe frameborder="0& ...

  10. IFrame父页面和子页面的交互

    现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...

随机推荐

  1. 【BZOJ2597】[Wc2007]剪刀石头布 最小费用流

    [BZOJ2597][Wc2007]剪刀石头布 Description 在一些一对一游戏的比赛(如下棋.乒乓球和羽毛球的单打)中,我们经常会遇到A胜过B,B胜过C而C又胜过A的有趣情况,不妨形象的称之 ...

  2. 通用分页(Jquery版)

    1.简单定义下样式 <style type="text/css"> .fanye { color: blue; margin-right: 15px; text-dec ...

  3. linq to xml操作XML(转)

    转自:http://www.cnblogs.com/yukaizhao/archive/2011/07/21/linq-to-xml.html LINQ to XML提供了更方便的读写xml方式.前几 ...

  4. Hadoop实战-Flume之Sink Failover(十六)

    a1.sources = r1 a1.sinks = k1 k2 a1.channels = c1 # Describe/configure the source a1.sources.r1.type ...

  5. 基础学习笔记之opencv(6):实现将图片生成视频

    基础学习笔记之opencv(6):实现将图片生成视频 在做实验的过程中.难免会读视频中的图片用来处理,相反将处理好的图片又整理输出为一个视频文件也是非经常常使用的. 以下就来讲讲基于opencv的C+ ...

  6. Linux就该这么学--了解Shell脚本

    有人曾经将Shell形容是人与计算机硬件的“翻译官”,Shell作为用户与Linux系统通讯的媒介.自身也定义了各种变量和参数,并提供了诸如循环.分支等高级语言才有的控制结构特性.如何正确的使用这些功 ...

  7. 关于Spring注解 @Service @Component @Controller @Repository 用法

    @Component 相当于实例化类的对象,其他三个注解可以理解为@Component的子注解或细化. 在annotaion配置注解中用@Component来表示一个通用注释用于说明一个类是一个spr ...

  8. Swift - 修改导航栏的样式(文字颜色,背景颜色,背景图片)

    默认情况,导航栏UINavigationController的样式如下,如果想要使用代码修改样式也是比较简单的. 1,修改导航栏背景色 1 2 3 //修改导航栏背景色 self.navigation ...

  9. mysql服务突然不能启动

    mysql之前一直用的好好的,今天突然不能启动.前几天改过my.ini文件,在[mysqld]下添加了default-character-set=utf8.查看日志发现是添加的那句话的错误,删除.并且 ...

  10. POJ 2348 Euclid Game (模拟题)

    Euclid's Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7942   Accepted: 3227 Des ...