HTML5 Messaging API使HTML5页面之间可以相互发送消息，即使这些页面不是从同一域(例如www.Hyman.com和www.google.com)加载的也是如此。

传送消息

为了将消息从一个页面发送到另一页面，发送消息的页面必须具有对另一页面窗口的引用。发送页面然后在接收页面的窗口对象上调用postMessage()函数。

这是一个页面向iframe中显示的另一个页面发送消息的示例：

var message = "Hello there";
var origin  = "http://theitroad.local";

var theIframe = document.getElementById("theIframe");

theIframe.contentWindow.postMessage(message, origin);

我们可以通过按以下按钮运行上面的代码：

功能messagingExample1(){var message =" Hello there"; var origin =" ../index.html"; // var origin =" http：// localhost：8080"; var theIframe = document.getElementById(" theIframe"); Iframe.contentWindow.postMessage(消息，来源); }

传递给postMessage()函数的origin参数的值必须与从iframe中加载页面的域匹配。如果原点不匹配，则无法使用。我们不需要页面的完整地址作为原始地址。该域就足够了，例如" http：// localhost"或者" http：//theitroad.local"

接收讯息

要侦听消息，页面需要在其自己的窗口对象上设置onmessage事件处理函数。这是在Firefox和Chrome中运行的示例：

window.onmessage = function(event) {
    document.getElementById("show").innerHTML =
            "Message Received: " + event.data
          + " from: " + event.origin;
};

这个例子在窗口对象上设置了" onmessage"功能。该代码在函数内部选择ID为" show"的HTML元素，并将该元素的内部HTML设置为" Message Received："，再加上收到的消息。该事件处理程序实际上是示例中"发送消息"下iframe中显示的页面中使用的事件处理程序。

在Internet Explorer 9中，我们必须使用以下代码来监听onmessage事件：

window.attachEvent("onmessage", function(event) {
    document.getElementById("show").innerHTML =
            "Message Received: " + event.data
          + " from: " + event.origin;
});

我们可以将这两个事件侦听器代码块都保留在页面中。他们不应该互相冲突。

收到的事件对象包含以下属性：

data
origin
source

data属性包含从发送页面发送的消息。

" origin"属性包含发送消息的页面的来源(域)。

source属性包含对发送页面的窗口对象的引用。该窗口对象引用可用于通过postMessage()函数将消息发送回发件人页面。这是一个例子：

window.onmessage = function(event) {
    event.source.postMessage(
       "Thank you for the message",
       event.origin
    );
}

发送JSON

消息传递API仅允许我们发送字符串消息。如果需要发送JavaScript对象，则需要使用JSON.stringify()将其转换为JSON字符串，然后使用JSON.parse()再次对其进行解析。这是一个例子：

var theObject = { property1 : "hello", property2 : "world" };
var message = JSON.stringify(theObject);
var origin  = "http://theitroad.local";

var theIframe = document.getElementById("theIframe");

theIframe.contentWindow.postMessage(message, origin);

这是将JSON字符串解析为JavaScript对象的方式：

window.onmessage = function(event) {
    var theObject = JSON.parse(event.data);
}