附实例！实现iframe父窗体与子窗体的通信
欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~
本文主要会介绍如何基于MessengerJS，实现iframe父窗体与子窗体间的通信，传递数据信息。同时本文会提供一个可运行的实例代码，实现在父窗体中，获取到来自子窗体的数据的效果。
0.背景介绍
(1)需要在当前的前端项目中，使用iframe嵌套别的站点页面。
(2)当子窗体触发了一个事件后，要给父窗体传一个跳转地址的url。父窗体监听到这个事件后，根据接收到的url，来更新当前父窗体的url，实现页面的跳转。
1.采用方案
1.1 MessengerJS方案
可以采用MessengerJS方案，该方案可以实现父窗体与iframe之间的通信、多个iframe之间的通信。不过要前提是要确保对不同域的页面有修改权限，并且父窗体、子窗体页面都要同时加载这个MessengerJS。
1.2 使用方法
(1) 在需要通信的父窗体、和子窗体的文档中，都需要引入MessengerJS。
(2) 父窗体和子窗体各自的文档（document）中，都需要自己的Messenger与其他文档通信，父窗体和子窗体的window对象都对应着有且仅有一个Messenger对象，该Messenger对象会负责当前window的所有通信任务。因此，每个Messenger对象都需要唯一的名字，这样它们之间才可以知道是在跟谁通信。另外，MessengerJS方案推荐指定项目名称，（类似命名空间的作用），以增强代码健壮性与组件复用性，避免未来与其他项目冲突。(注意: 项目名称应使用字符串类型)
父窗体与子窗体初始化Messenger对象：
// 父窗口中 - 初始化Messenger对象
// 推荐指定项目名称, 避免Mashup类应用中, 多个开发商之间的冲突
var messenger = new Messenger('Parent', 'projectName');
// iframe中 - 初始化Messenger对象
// 注意! Messenger之间必须保持项目名称一致, 否则无法匹配通信
var messenger = new Messenger('iframe1', 'projectName');
// 多个iframe, 使用不同的名字
var messenger = new Messenger('iframe2', 'projectName');
(3) 在发现消息前，目标文档要确保已经监听了消息事件：
messenger.listen(function(msg){
alert("收到消息: " + msg);
});
(4) 父窗体想给子窗体发信息，要添加消息对象，明确告知当前的父窗体，要发送消息的子窗体的window引用与messenger对象的名字：
// 父窗口中 - 添加消息对象, 明确告诉父窗口iframe的window引用与名字
messenger.addTarget(iframe1.contentWindow, 'iframe1');
// 父窗口中 - 可以添加多个消息对象
messenger.addTarget(iframe2.contentWindow, 'iframe2');
(5) 发消息时，要指定messenger的名字和消息，例如父窗体要给子窗体发消息：
// 父窗口中 - 向单个iframe发消息
messenger.targets['iframe1'].send(msg1);
messenger.targets['iframe2'].send(msg2);
// 父窗口中 - 向所有目标iframe广播消息
messenger.send(msg);
2.实例
基于上面的介绍，下面要实现开篇提出的需求了（实例代码只是示例如何传递数据，没有更改父窗体url）。这里分别是父窗体和子窗体的代码实现，可直接在浏览器中打开查看效果，其中messenger.js可以在这里下载，放到项目目录下。
父窗体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父窗体</title>
<style type="text/css"></style>
<!-- 这个messenger.js可下载放到项目目录下 -->
<script type="text/javascript" src="./messenger.js"></script>
</head>
<body>
<div>这是父窗体</div>
<div id="msg"></div>
<iframe id="iframe1" name="iframe1" src="./child.html" width="600px" height="316px" style="z-index: 100000;position: absolute;">
</iframe>
</body>
<script type="text/javascript">
//父页面中,注册一个messager到一个统一的项目中,第一个参数为自己页面的名称，第二个参数为项目名称
var messenger = new Messenger('parent', 'monitor'),
iframe1 = document.getElementById('iframe1');
//父页面中绑定监听消息事件，当接受到iframe1发来的消息后执行
messenger.listen(function (msg) {
// alert(msg);
var oDiv = document.getElementById("msg");
oDiv.innerHTML += msg;
//todo
});
</script>
</html>
子窗体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子窗体</title>
<style type="text/css"></style>
<!-- 这个messenger.js可下载放到项目目录下 -->
<script type="text/javascript" src="./messenger.js"></script>
</head>
<body>
<div style="background: #8CB08B;height:300px;">
<div>这是子窗体</div>
<input type="button" onclick="sendMessage('这是一条来自子窗体的消息!')" value="按钮" />
</div>
</body>
<script type="text/javascript">
//子页面中,注册一个messager到一个统一的项目中,第一个参数为自己页面的名称，第二个参数为项目名称
var messenger = new Messenger('iframe1', 'monitor');
//添加消息对象, 明确告诉子窗口iframe的window引用与名字
messenger.addTarget(window.parent, "parent");
function sendMessage(msg) {
messenger.targets["parent"].send(msg);
}
</script>
</html>
代码解释：
父窗体中嵌入iframe，要先引入messenger.js，同时初始化messenger到一个统一的项目中，其中第一个参数为自己页面messenger对象的名字，第二个参数为项目名称；然后父窗体要绑定监听消息事件，当接收到iframe子窗体发来的消息后执行。
子窗体也要先引入messenger.js，同时初始化一个messenger到一个统一的项目中，其中第一个参数为自己页面messenger对象的名字，第二个参数为项目名称；然后添加消息对象，告知子窗体的window引用与messenger对象的名字。然后在触发onclick事件时，向父窗口传递消息。发消息时，要指定接收消息的父窗体的messenger的名字，以及传递的消息。
3.小结
本文主要是介绍了一个MessengerJS方案及其使用方法，来解决父窗体与子窗体的通信问题。同时提供了一个完整的实例，可以实现子窗体向父窗体传递消息，父窗体通过监听消息事件，来获取子窗体消息的目的。如有问题，欢迎指正。
此文已由作者授权腾讯云+社区发布，更多原文请点击
搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！
海量技术实践经验，尽在云加社区！
附实例！实现iframe父窗体与子窗体的通信的更多相关文章
- Caliburn.Micro 关闭父窗体打开子窗体
比如我们在做登录的时候需要关闭父窗体打开子窗体.使用Caliburn.Micro它的时候我们关闭登录窗口的时候主页面也会关闭. 解决方法就是在登录页面的CS里面写 IndexView iv = new ...
- winform里操作打开在panel里的form窗体，子窗体操作同级子窗体或者父窗体的方法
最近开始了一个winform项目,原先一直都是web项目.遇到个问题,就是在框架内,左侧和中间的main都是用panel来实现的form,就是把form窗体打开到panel里,实现左侧是导航,中间是操 ...
- Iframe父页面与子页面之间的调用
原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下: Iframe:iframe元素是文档中的文档. window对象: 浏览器会在其打 ...
- JQuery操作iframe父页面与子页面的元素与方法
JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...
- C#_父窗体跟子窗体的控件操作
很多人都苦恼于如何在子窗体中操作主窗体上的控件,或者在主窗体中操作子窗体上的控件.相比较而言,后面稍微简单一些,只要在主窗体中创建子窗体的时候,保留所创建子窗体对象即可. 下面重点介绍前一种,目前常见 ...
- iframe父窗口和子窗口的调用方法
iframe 父窗口和子窗口的调用方法父窗口调用子窗口 iframe_name.iframe_document_object.object_attribute = attribute_value 例子 ...
- C# 关闭子窗体释放子窗体对象问题
1 在主窗口中实例化子窗口 Form2 f2 = new Form2(); 2 通过按钮来显示子窗口 f2.Show(); 3 关闭子窗口而不释放子窗口对象的方法 protected override ...
- 界面主窗体，子窗体的InitializeComponent(构造函数)、Load事件执行顺序
主窗体,子窗体的InitializeComponent(构造函数).Load事件执行顺序1.执行主窗体定义事件 new函数时,同时执行主窗体构造函数,默认就一个InitializeComponent函 ...
- 2016.6.18主窗体、子窗体InitializeComponent()事件、Load事件发生顺序以及SeleChanged事件的发生
主窗体,子窗体的InitializeComponent(构造函数).Load事件执行顺序 1.主窗体定义事件 new 主窗体() 构造函数进入主窗体InitializeComponent函数,该函数中 ...
随机推荐
- Eigen子矩阵操作
1 子矩阵操作简介 子矩阵操作又称块操作,在矩阵运算中,子矩阵的提取和操作应用也十分广泛.因此Eigen中也提供了相关操作的方法.提取的子矩阵在操作过程中既可以用作左值也可以用作右值. 2 块操作的一 ...
- C++学习札记（2）
重载构造函数 #include <iostream> using namespace std; class rectangle { public: rectangle(){cout< ...
- JPanel JScrollPanel
JPanel 和 JScrollPanel 都属于面板,也是 Swing 中间容器,可以作为容器存放组件,但必须被添加到其他容器中. JPanel 可以聚集一些组件来布局, JScrollPanel ...
- 【Mybatis】MyBatis快速入门（一）
Mybatis简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可 ...
- [Bat]如何彻底关闭每个盘符默认的共享$(即使重启也有效)
Windows启动时都会默认打开admin$ ipc$ 和每个盘符的共享,对于不必要的默认共享,一般都会把它取消掉,可当又需要打开此默认共享时,又该从哪里设置呢,一般来说有两个地方,MSDOS命令和计 ...
- 在linux中文件的权限讲解
1.d:directory(目录): 表示这个文件是个目录,其他的还有f(file文件)等等: 2.r:read(可读) 3.w:write(可写) 4 x :execute(可执行) 一般Linux ...
- HDU 4309 Seikimatsu Occult Tonneru (状压 + 网络流)
题意:输入 n 个城市 m 条边,但是边有三种有向边 a b c d,第一种是 d 是 0,那么就是一条普通的路,可以通过无穷多人,如果 d < 0,那么就是隧道,这个隧道是可以藏 c 个人, ...
- Java设计模式----解释器模式
计算器中,我们输入“20 + 10 - 5”,计算器会得出结果25并返回给我们.可你有没有想过计算器是怎样完成四则运算的?或者说,计算器是怎样识别你输入的这串字符串信息,并加以解析,然后执行之,得出结 ...
- linux下编写C++程序播放音频
参考: https://blog.csdn.net/zlyaxixuexi/article/details/79014441 格式转换: https://www.media.io/zh/
- 建立一个类似于天眼的Android应用程序：第4部分 - 持久收集联系人，通话记录和短信（SMS）
建立一个类似于天眼的Android应用程序:第4部分 - 持久收集联系人,通话记录和短信(SMS) 电话黑客android恶意软件编程黑客入侵linux 随着我们继续我们的系列,AMUNET应用程序变 ...