MessengerJS

跨文档通讯解决方案

Since modern browsers have native cross-document communication method(the PostMeessage API, and the "message" event), this project is primarily for the developers who still need to care about the compatiblity in IE6/7, especially the developers in China, I will use Chinese in this document. If you guys wanna learn some more, please leave an issue, and I will provide the english version of help.

简单地说, 若是你不用兼容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提示了吗?

Demo

http://biqing.github.io/labs/messenger/parent.html

关于消息安全性

因为任何iframe均可以收到广播的消息，建议传递消息时使用JSON String的形式，使用一个字段作消息有效性的验证。若是怕一个固定值（如项目名）不安全，可使用一个简单的加密算法，并对业务脚本进行压缩混淆，此时的安全风险能够降到最低。

问题与建议

使用中不免遇到问题，欢迎提问与建议 : )

提交Issue