共计 3412 个字符，预计需要花费 9 分钟才能阅读完成。
欢迎大家前往腾讯云 + 社区，获取更多腾讯海量技术实践干货哦~
本文由前端林子发表于云 + 社区专栏
本文主要会介绍如何基于 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 方案及其使用方法，来解决父窗体与子窗体的通信问题。同时提供了一个完整的实例，可以实现子窗体向父窗体传递消息，父窗体通过监听消息事件，来获取子窗体消息的目的。如有问题，欢迎指正。
相关阅读【每日课程推荐】机器学习实战！快速入门在线广告业务及 CTR 相应知识
