H5通信API

跨文档消息传输

H5提供了在网页文档之间互相接收与发送信息的功能。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同源的Web网页之间可以通信，甚至可以实现跨域通信。
  要想接收从其它窗口发来的信息，就必须对窗口对象的message事件进行监听。

window.addEventListener("message",function(){...},false);

使用window对象的postMessage方法向其它窗口发送消息。

otherWindow.postMessage(message,targetOrigin);

该方法使用两个参数，第一个参数为发送的信息文本，也可以是任何JS对象。第二个参数为接收信息的对象窗口的URL地址。otherWindow为要发送窗口对象的引用，可以通过window.open返回该对象，或通过window.frames数组指定序号或名字的方式来返回单个frame所属的窗口对象。

实例

在该实例中，实现了主页面和主页面中的iframe子页面之间的互相通信。首先，主页面向iframe子页面发送消息，iframe子页面接收消息，显示在本页中，然后向主页面返回消息。最后主页面接收消息，然后将该消息用alert方法弹出。
  主页面和iframe子页面被配置在不同域中，以实现跨域通信。

跨域通信示例

iframe子页面中的代码：

说明：
  通过对window对象的message事件进行监听，可以接收消息。
  通过访问message事件的origin属性可以获取消息的发送源。
  通过访问message事件的data属性，可以取得消息内容。
  通过postMessage方法发送消息。
  通过访问message事件的source属性，可以获取消息发送源的窗口对象。