iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。

一、同域下父子页面的通信

父页面parent.html

<html>

<head>

    <script type="text/javascript">

        function say(){

            alert("parent.html");

        }

        function callChild(){

            myFrame.window.say();

            myFrame.window.document.getElementById("button").value="调用结束";

        }

    </script>

</head>

<body>

    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>

    <iframe name="myFrame" src="child.html"></iframe>

</body>

</html>

子页面child.html

<html>

<head>

    <script type="text/javascript">

        function say(){

            alert("child.html");

        }

        function callParent(){

            parent.say();

            parent.window.document.getElementById("button").value="调用结束";

        }

    </script>

</head>

<body>

    <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>

</body>

</html>

方法调用

父页面调用子页面方法： FrameName.window.childMethod();

子页面调用父页面方法： parent.window.parentMethod();

DOM元素访问

获取到页面的window.document对象后，即可访问DOM元素

注意事项:

要确保在iframe加载完成后再进行操作，如果iframe还未加载完成就开始调用里面的方法或变量，会产生错误。

判断iframe是否加载完成有两种方法：

iframe上用onload事件

用document.readyState=="complete"来判断

二、跨域父子页面通信方法

如果iframe的链接是外部页面，因为安全机制就不能使用同域名下的通信方式了。

父页面向子页面传递数据

实现的技巧是利用location对象的hash值，通过它传递通信数据。

在父页面设置iframe的src后面多加个data字符串，然后在子页面中通过某种方式能即时的获取到这儿的data就可以了，例如：

在子页面中通过setInterval方法设置定时器，监听location.href的变化即可获得上面的data信息

然后子页面根据这个data信息进行相应的逻辑处理

子页面向父页面传递数据

实现技巧就是利用一个代理iframe，它嵌入到子页面中，并且和父页面必须保持是同域，

然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理iframe，

然后由于代理的iframe和主页面是同域的，所以主页面就可以利用同域的方式获取到这些数据。

使用window.top或者window.parent.parent获取浏览器最顶层window对象的引用。

JS中iframe子页面与父页面之间通信的更多相关文章

js之iframe子页面与父页面通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信父页面parent.html <html> <head& ...
嵌入式iframe子页面与父页面js通信方式
iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现 ...
iframe子页面与父页面元素的访问以及js变量的访问
1.子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素 document.getEle ...
jQuery中，子页面与父页面之间的调用方法
在jQuery中, 子页面查找父页面的元素 parent.$("#元素Id") 父页面调用子页面的元素 $("#子页面iframe的Id").contents( ...
js 在iframe子页面获取父页面元素,或在父页面获取iframe子页面的元素的几种方式
用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...
Js获取iframe子页面全局变量
项目中通过iframe内嵌了一个子页面,子页面定义了一些全局变量,父页面需要获取子页面的全局变量,做了一些测试(我的环境IE10和Firefox32.0.3),得出如下结论: IE下: window. ...
ifream子页面与父页面互调
function a1(x){ alert('父页面:' + x); } function acc(){ var frames = document.getElementById("dial ...
js中escape的用法----前端页面简单加密
escape() 方法,它用于转义不能用明文正确发送的任何字符.比如,电话号码中的空格将被转换成字符 %20,从而能够在 URL 中传递这些字符. http://localhost:8080/a?na ...
关于js中iframe 中 location.href的用法
关于js中"window.location.href"."location.href"."parent.location.href".&qu ...

随机推荐

菜篮子成血战场！生鲜O2O为何厮杀如此惨烈
衣食住行作为与大众生活直接挂钩的刚需,已经被诸多互联网企业全面渗入,并在彻底颠覆大众原有的生活形态.但其中作为最底层.最基本的"菜篮子"--生鲜市场,似乎仍然没有被互联网元素完全& ...
简单的java开源图床
出于自用的目的,又找不到Java写的开源的程序,然后使用开源上传组件bootstrap-fileinput用 Spring Boot 写了一个图床目前支持:七牛云,阿里云 GitHub: https ...
Tomcat生产环境应用
概要: Tomcat各核心组件认知 Tomcat server.xml 配置详解 Tomcat IO模型介绍一.Tomcat各组件认知 Tomcat架构说明 Tomcat组件及关系详情介绍 Tomc ...
iOS 开发富文本之TTTAttributedLabel 在某个特定位置的文字添加跳转，下划线，修改字体大小，颜色
@property(nonatomic , strong) TTTAttributedLabel * ttLabel; @property(nonatomic , strong) NSRange li ...
连接器巨头Molex莫仕大裁员,CEO更迭
序言:中美贸易战的大环境下,美国多方面限制对华出口电子科技,其中影响最大的莫过于限制芯片出口,中国本土芯片和电子产业也在蓬勃的发展.根据正能量电子了解连接器巨头MOLEX莫仕公司收入的1/3是来自于对 ...
Metaploit-永恒之蓝漏洞利用
目录 Metaploit介绍实验环境漏洞利用过程 Metaploit介绍本次测试主要是利用永恒之蓝漏洞对windows7进行控制利用,掌握Metaploit工具的使用,知道永恒之蓝的漏洞利用原理 ...
Java 在PDF中添加表格
本文将介绍通过Java编程在PDF文档中添加表格的方法.添加表格时,可设置表格边框.单元格对齐方式.单元格背景色.单元格合并.插入图片.设置行高.列宽.字体.字号等. 使用工具:Free Spire. ...
Cisco模拟器的基本使用
获取帮助查找命令只需输入一个'?'便可得到详细的帮助信息,如果想获取c开头的命名,那么直接输入'c?'即可. 在各个模式下切换的方法给如图所示路由器接口配置IP地址第一步:安装HWIC-2T(串 ...
css布局中的各种FC（BFC、IFC、GFC、FFC）
什么是FC?FC(Formatting Context)格式化上下文,其实指的是一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素之间的关系和相互作用. 什么是BFC? BFC( ...

JS中iframe子页面与父页面之间通信