MessengerJS 跨文档通信的通用解决方案

发布于 2020-08-25 22:35:21 字数 2671 浏览 1303 评论 0

由于现代浏览器有本机跨文档通信方法,PostMeessage API 和 消息事件,本项目主要为需要关注 ie6/7 的开发人员,简单地说,如果你不用兼容 IE6/7 的 iframe 通信,你就不需要这套方案了。

适用场景

此方案适用于以下跨域情形:

  • 父窗口与iframe之间通信
  • 多个iframe之间通信

上述所有情况, 都需确保对不同域的页面有修改权限, 并同时加载MessengerJS
IE下不支持跨窗口通信

常见跨源问题有:

  • 跨子域
  • 跨全域
  • 跨协议(HTTP与HTTPS)

理念: 关于"信使"的一切

理解设计理念对实际使用有帮助作用,高手可以直接跳到下方使用说明。

在跨文档通信中,一切消息都是以字符串形式存在,可以视其为"报文",因此负责派送和接受信件的角色,我们称其为"信使"(Messenger)。

Messenger 的职责很简单,主要分为 发送消息(send) 与 监听消息(listen),而消息的内容都是字符串。实际使用中,最好不要直接使用简单的字符串,而建议使用结构化的消息(JSON String)。具体逻辑请自行实现:发送前将json内容stringify,收到后进行parse,以实现消息内容的扩展性。

如何使用

1、在需要通信的文档中(父窗口和iframe们), 都确保引入MessengerJS

2、每一个文档(document),都需要自己的Messenger与其他文档通信。即每一个window对象都对应着一个,且仅有一个Messenger对象,该Messenger对象会负责当前window的所有通信任务。每个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、在发送消息前,确保目标文档已经监听消息事件。

 // iframe中 - 监听消息
 // 回调函数按照监听的顺序执行
 messenger.listen(function(msg){
 	alert("收到消息: " + msg);
 });

4、父窗口想给iframe发消息,它怎么知道iframe的存在呢?添加一个消息对象吧。

 // 父窗口中 - 添加消息对象, 明确告诉父窗口iframe的window引用与名字
 messenger.addTarget(iframe1.contentWindow, 'iframe1');

 // 父窗口中 - 可以添加多个消息对象
 messenger.addTarget(iframe2.contentWindow, 'iframe2');

5、一切ready,发消息吧~发送消息有两种方式。 (以父窗口向iframe发消息为例)

 // 父窗口中 - 向单个iframe发消息
 messenger.targets['iframe1'].send(msg1);
 messenger.targets['iframe2'].send(msg2);

 // 父窗口中 - 向所有目标iframe广播消息
 messenger.send(msg);

6、现在看到iframe收到消息的alert提示了吗?

关于消息安全性

由于任何 iframe 都可以收到广播的消息,建议传递消息时使用 JSON String 的形式,使用一个字段做消息有效性的验证。如果怕一个固定值(如项目名)不安全,可以使用一个简单的加密算法,并对业务脚本进行压缩混淆,此时的安全风险可以降到最低。

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

漫雪独思

文章 0 评论 0

垂暮老矣

文章 0 评论 0

鹊巢

文章 0 评论 0

萌酱

文章 0 评论 0

雨说

文章 0 评论 0

冰葑

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文