附实例！实现iframe父窗体与子窗体的通信

xiaochao 发布于2019-04-23 13:11 / 1712人阅读

摘要：小结小结本文主要是介绍了一个方案及其使用方法，来解决父窗体与子窗体的通信问题。同时提供了一个完整的实例，可以实现子窗体向父窗体传递消息，父窗体通过监听消息事件，来获取子窗体消息的目的。

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~

本文由前端林子发表于云+社区专栏

本文主要会介绍如何基于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可以在这里下载，放到项目目录下。

父窗体：

子窗体：

代码解释：

父窗体中嵌入iframe，要先引入messenger.js，同时初始化messenger到一个统一的项目中，其中第一个参数为自己页面messenger对象的名字，第二个参数为项目名称；然后父窗体要绑定监听消息事件，当接收到iframe子窗体发来的消息后执行。

子窗体也要先引入messenger.js，同时初始化一个messenger到一个统一的项目中，其中第一个参数为自己页面messenger对象的名字，第二个参数为项目名称；然后添加消息对象，告知子窗体的window引用与messenger对象的名字。然后在触发onclick事件时，向父窗口传递消息。发消息时，要指定接收消息的父窗体的messenger的名字，以及传递的消息。

3.小结

本文主要是介绍了一个MessengerJS方案及其使用方法，来解决父窗体与子窗体的通信问题。同时提供了一个完整的实例，可以实现子窗体向父窗体传递消息，父窗体通过监听消息事件，来获取子窗体消息的目的。如有问题，欢迎指正。

相关阅读
【每日课程推荐】机器学习实战！快速入门在线广告业务及CTR相应知识

此文已由作者授权腾讯云+社区发布，更多原文请点击

搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！

海量技术实践经验，尽在云加社区！

云服务器服务器托管父窗体与子窗体子父窗体传递值 asp刷新父窗体子窗体实例化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1538.html

作为window对象属性的元素多窗口和窗体

摘要：作为对象属性的文档元素如果文档中用属性为元素命名。其就是交互窗口中的每个窗口窗体都是的执行上下文。以对象作为全局对象，这样的话，一个窗口窗体中的代码可以应用到其他窗口或者窗体并且同源策略没有进行阻止。作为window对象属性的文档元素如果html文档中用id属性为元素命名。并且如果 window对象没有此名字的属性，则window对象会赋予一个属性，其名字为id属性的值，其值指向该...

fredshare 2019-08-23 10:41 评论0 收藏0
js中几种跨域的方法

摘要：四通过跨域一个页面嵌入一个外域的页面虽然两个窗体之前能获取彼此的对象，但是却拿不到上的属性和方法，例如一个页面嵌入一个的我是父窗体的方法嵌入的窗体跟的域名不同，很明显是跨域的，虽然能获取到对象，但是拿不到页面的任何方法和属性。 js跨域是指通过js在不同域之间进行相互通信或者数据传输，只要协议，域名，端口号其中有一个不同，就是跨域。下面总结一下我了解到的常用的跨域方法。一：通过jso...

XboxYan 2019-08-21 11:49 评论0 收藏0
父窗体计算Iframe内部模块的高度，付给Iframe

function setIframeHeight(id){ try{ var iframe = document.getElementById(id); if(iframe.attachEvent){ iframe.attachEvent(onload, function(){ iframe.heigh...

doodlewind 2019-08-21 16:51 评论0 收藏0
2019秋招知识盲点总结

摘要：实际上是一个让出线程的标志遇到会立即返回一个状态的。一个简单的防抖函数如果定时器存在则清除重新开始定时执行缺点只能在最后执行，不能立即被执行，在某些情况下不适用。假设压入栈的所有数字均不相等。接收数据不受同源政策限制。开始尽管秋招还没有拿到offer（好难过），但是一些知识点还是要总结的，既然自己选了这条路，那就一定要坚定不移的走下去...... 注意 new 运算符的优先级 fu...

Doyle 2019-08-23 11:52 评论0 收藏0
跨域那些事儿

摘要：什么是跨域我们先看下以下场景开启两个本地服务器，页面为，其中嵌套了，页面想使用页面的数据，例如调用它的方法，会报以下错误如图所示，，，译为协议主机和端口号必须符合，否则，就是跨域。跨域的几种常见方案同源策略的限制范围有以下几种和无法读取。什么是跨域我们先看下以下场景：开启两个本地服务器，页面A为localhost:9800，其中嵌套了iframeB localhost:9000，页...

nevermind 2019-08-21 15:01 评论0 收藏0