文档章节

【转】js之iframe子页面与父页面通信

北京d路飞
 北京d路飞
发布于 2016/06/16 10:06
字数 632
阅读 51
收藏 2

 

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是否加载完成有两种方法:

1. iframe上用onload事件

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

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

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

父页面向子页面传递数据

实现的技巧是利用location对象的hash值,通过它传递通信数据。在父页面设置iframe的src后面多加个data字符串,然后在子页面中通过某种方式能即时的获取到这儿的data就可以了,例如:

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

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

子页面向父页面传递数据

实现技巧就是利用一个代理iframe,它嵌入到子页面中,并且和父页面必须保持是同域,然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理iframe,然后由于代理的iframe和主页面是同域的,所以主页面就可以利用同域的方式获取到这些数据。使用 window.top或者window.parent.parent获取浏览器最顶层window对象的引用。

本文转载自:http://www.cnblogs.com/sydeveloper/p/3712863.html

共有 人打赏支持
北京d路飞
粉丝 12
博文 13
码字总数 2090
作品 1
朝阳
技术主管
私信 提问
附实例!实现iframe父窗体与子窗体的通信

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表于云+社区专栏 本文主要会介绍如何基于MessengerJS,实现iframe父窗体与子窗体间的通信,传递数据信息。同时本...

腾讯云加社区
2018/11/16
0
0
iframe子页面调用父页面javascript函数的方法(支持chrome和IE的通用方法)

iframe子页面调用父页面javascript函数的方法 今天遇到一个iframe子页面调用父页面js函数的需求,解决起来很简单,但是在chrome浏览器遇到一点小问题。顺便写一下iframe的父页面调用子页面j...

卖火柴的format
2014/08/11
0
1
[转]iframe跨域通信的通用解决方案

一、背景 在这个Web页面越来越丰富的时代,页面通过iframe嵌入其他的页面也越来越常见。但由于浏览器同源策略的限制,不同域之间属性和操作是无法直接交互的,所以在这个时候,开发者多多少少...

Gmupload
2013/09/24
0
0
html5 Postmessage解决跨域问题

在 Cross-document messaging 中使用 postMessage 和 onmessage 为了实现不同域之间的通信,需要在操作系统的 hosts 文件添加两个域名,进行模拟。 清单 3. hosts 文件中添加两个不同的域名 ...

noonoo
2015/04/05
0
0
jQuery控制IFRAME父窗口元素

DOM方法: 父窗口操作IFRAME:window.frames["iframeSon"].document IFRAME操作父窗口: window.parent.document jquery方法: 在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["i......

疯狂的艺术家
2011/04/01
0
1

没有更多内容

加载失败,请刷新页面

加载更多

Amino——框架层

框架层 目录 框架层... 1 Amino. 2 (一)、首页(TAB1)... 2 (二)、聊天(TAB2)... 3 (三)、我的社区(TAB3)... 5 (四)、探索(TAB4)... 6 (五)、钱包... 7 兴趣部落... 8 (一...

铸剑为犁413
30分钟前
0
0
k8s-dashboard

Kubernetes Dashboard 是一个管理Kubernetes集群的全功能Web界面,旨在以UI的方式完全替代命令行工具(kubectl 等) kubectl apply -f http://mirror.faasx.com/kubernetes/dashboard/master...

ZH-JSON
37分钟前
1
0
python如何安装库命令

python3 -m pip install 库名称

怪咖先生forever
37分钟前
1
0
如何将Collection应用到实际开发当中

//举个例子 //Student类 public class Student { public String name; public String age; public Student(String name, String age) {this.name = name;this.age = age; } public S......

南桥北木
42分钟前
2
0
聊聊flink的ProcessFunction

序 本文主要研究一下flink的ProcessFunction 实例 import org.apache.flink.api.common.state.ValueState;import org.apache.flink.api.common.state.ValueStateDescriptor;import org.apa......

go4it
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部