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

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

本文主要会介绍如何基于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相应知识

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

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

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

附实例!实现iframe父窗体与子窗体的通信的更多相关文章

  1. Caliburn.Micro 关闭父窗体打开子窗体

    比如我们在做登录的时候需要关闭父窗体打开子窗体.使用Caliburn.Micro它的时候我们关闭登录窗口的时候主页面也会关闭. 解决方法就是在登录页面的CS里面写 IndexView iv = new ...

  2. winform里操作打开在panel里的form窗体,子窗体操作同级子窗体或者父窗体的方法

    最近开始了一个winform项目,原先一直都是web项目.遇到个问题,就是在框架内,左侧和中间的main都是用panel来实现的form,就是把form窗体打开到panel里,实现左侧是导航,中间是操 ...

  3. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

  4. JQuery操作iframe父页面与子页面的元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...

  5. C#_父窗体跟子窗体的控件操作

    很多人都苦恼于如何在子窗体中操作主窗体上的控件,或者在主窗体中操作子窗体上的控件.相比较而言,后面稍微简单一些,只要在主窗体中创建子窗体的时候,保留所创建子窗体对象即可. 下面重点介绍前一种,目前常见 ...

  6. iframe父窗口和子窗口的调用方法

    iframe 父窗口和子窗口的调用方法父窗口调用子窗口 iframe_name.iframe_document_object.object_attribute = attribute_value 例子 ...

  7. C# 关闭子窗体释放子窗体对象问题

    1 在主窗口中实例化子窗口 Form2 f2 = new Form2(); 2 通过按钮来显示子窗口 f2.Show(); 3 关闭子窗口而不释放子窗口对象的方法 protected override ...

  8. 界面主窗体,子窗体的InitializeComponent(构造函数)、Load事件执行顺序

    主窗体,子窗体的InitializeComponent(构造函数).Load事件执行顺序1.执行主窗体定义事件 new函数时,同时执行主窗体构造函数,默认就一个InitializeComponent函 ...

  9. 2016.6.18主窗体、子窗体InitializeComponent()事件、Load事件发生顺序以及SeleChanged事件的发生

    主窗体,子窗体的InitializeComponent(构造函数).Load事件执行顺序 1.主窗体定义事件 new 主窗体() 构造函数进入主窗体InitializeComponent函数,该函数中 ...

随机推荐

  1. Java之IO流总结

    IO流·Java流式输入/输出原理·Java流类的分类·输入/输出流类·常见的节点流和处理流·文件流·缓冲流·转换流·数据流·Print流·Object流 ①Java流式输入/输出原理         ...

  2. AVH IP网络广播系统

    AVH  IP网络广播系统特点:        IP网络广播系统是基于当前已广泛使用的以太网网络平台,充分利用网络平台,如用户处已有网络平台,则无需再布线,完全不同于纯模拟广播.调频寻址广播和数控广播 ...

  3. Log4j 日志组件

    官网:https://logging.apache.org/log4j/2.x/ 使用 Log4j 的步骤: 第一步 引入 Log4j 的 jar 包 1. 直接下载 log4j-x.x.x.jar ...

  4. WPF图片拖拉变形、合成

    使用WPF的装饰器(Adorner)实现图片拖拉变形,DrawingVisual高保真合成图片.效果如下: 源码:https://gitee.com/orchis/ImageFotoMix.git

  5. 【Git】 GitLab配置优化及汉化

    GitLab配置 1.修改GitLab绑定的域名 a.修改/etc/gitlab/gitlab.rb配置文件,修改成自己的域名 external_url 'http://gitlab.example. ...

  6. python参数

    1.形参变量和实参 形参变量:只有在被调用时才分配内存单元,在调用结束时,即释放所分配的内存单元,因此,形参只在函数内有效,函数调用结束返回主调用函数后则不能再使用该形参变量. 实参:可以是常量,变量 ...

  7. [uboot] (第二章)uboot流程——uboot-spl编译流程

    http://blog.csdn.net/ooonebook/article/details/52949584 以下例子都以project X项目tiny210(s5pv210平台,armv7架构)为 ...

  8. Django中的缓存(内存,文件,redis)

    一.Django中的缓存的几种方法 1)单个视图缓存.时间测试 import time from django.views.decorators.cache import cache_page @ca ...

  9. urlrewrite的rule怎么写

    一.正则表达式教程 常用正则如下: .              换行符以外的所有字符 \w          匹配字母或数字或下划线或汉字 \s           匹配任意的空白符 \d     ...

  10. qhfl-4 注册-登录-认证

    认证 任何的项目都需要认证,当用户输入了用户名和密码,验证通过,代表用户登录成功 那HTTP请求是无状态的,下次这个用户再请求,是不可能识别这个用户是否登录的 就要有自己的方式来实现这个认证,用户登录 ...