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子页面被配置在不同域中，以实现跨域通信。

<html>
<head>
<meta charset="UTF-8">
<title>跨域通信示例</title>
<script type="text/javascript">
// (1) 监听message事件
window.addEventListener("message", function(ev) {
  // (2) 忽略指定URL地址之外的页面传过来的消息
  if (ev.origin != "http://www.blue-butterfly.net") {
    return;
  }
  // (3) 显示消息
  alert("从"+ev.origin + "那里传过来的消息:\n\"" + ev.data + "\"");
}, false);
function hello() 
{
  var iframe = window.frames[0];
  // (4) 传递消息
  iframe.postMessage("你好", "http://www.blue-butterfly.net/test/");
}
</script>
</head>
<body>
<h1>跨域通信示例</h1>
<iframe width="400" src=http://www.blue-butterfly.net/test/ 
onload="hello()">
</iframe>
</body>
</html>

iframe子页面中的代码：

<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.addEventListener("message", function(ev) 
{
    if (ev.origin != "http://Lulingniu") 
    {
        return;
    }
    document.body.innerHTML = "从"+ev.origin + "那里传来的消息。<br>\""+ ev.data + "\"";
    // (5) 向主页面发送消息
    ev.source.postMessage("你好。这里是" + this.location, ev.origin);
}, false);
</script>
</head>
<body></body>
</html>

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

H5通信API

跨文档消息传输

实例

推荐阅读更多精彩内容