postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。

HTML5 postMessage 方法

postMessage 可以实现跨域文档的消息传输（Cross Document Messaging）。

向外界窗口发送消息：

otherWindow.postMessage(message, targetOrigin);

otherWindow: 指目标窗口，是 window.frames 属性的成员或者由 window.open 方法创建的窗口

参数说明：

1. message: 是要发送的消息，类型为 String、Object (IE8、9 不支持)
2. targetOrigin: 是限定消息接收范围，不限制请使用 ‘*’

HTML5 message 事件-接受消息

绑定消息事件：

window.addEventListener('message', receiver, false);
function receiver (event) {
  if (event.origin === 'http://www.php100.com') {
    if (event.data === 'Hello world') {
      event.source.postMessage('Hello', event.origin);
    } else {
      alert(event.data);
    };
  };
};

回调函数第一个参数接收 Event 对象，有三个常用属性：

• data: 消息
• origin: 消息来源地址
• source: 源 DOMWindow 对象

对于支持 postMessage 方法的浏览器直接使用它；而对于 IE6、7 采用了比较成熟的 window.name 保存数据以及跨域 iframe 静态代理动态传输方案，下面简称 Cross Frame。

开源事件库 messageEvent.js

“messageEvent.js”是针对上述方案封装的 message 事件与 postMessage 方法库，它让各个浏览器之间 message 的 Event 对象成员属性统一，event.data 属性能传递多达 2MB 的文本信息，并且能让 IE6-9 浏览器像其他现代浏览一样支持 Object 类型数据进行传递 （内部使用深拷贝方式）。

若应用双方页面都采用 messageEvent.js，即可轻松实现跨域通信。

接口

• add(callback) 添加 message 事件
• remove(callback) 卸载 message 事件
• postMessage(otherWindow, message, targetOrigin) 向外部窗口发送消息

通过 jQuery 使用它

jQuery 是一个应用比较广泛的 DOM 库，它的事件机制非常强大而精妙，可以实现自定义事件。若页面引用了 jQuery， messageEvent.js 会为为它提供支持，你可以用熟悉的jQuery api 风格编程，如：