HTML5 Messaging API（信息API）可以在HTML5页面之间相互发送信息，甚至是在域名不相同的页面之间也可以相互发送信息（例如http://www.htmleaf.com和https://www.baidu.com）。
发送信息
为了从一个页面向另一个页面发送信息，发送信息的页面必须有一个引用到另一个页面的窗口。然后发送信息的页面可以在接收信息的页面的window对象上调用postMessage()方法。
下面是一个例子，从当前页面上发送一条信息到另一个页面中，这里的另一个页面使用iframe进行显示。
var message = "这是一条发送的信息。";
var origin = "http://www.htmleaf.com";
var theIframe = document.getElementById("theIframe");
theIframe.contentWindow.postMessage(message, origin);
你可以通过点击按钮来发送信息：
传入postMessage()方法的参数origin的值必须和iframe中加载的页面的域名相匹配。如果域名不匹配，将得不到正确的结果。另外，你不必完整的页面URL地址只填写域名即可，例如：http://localhost或http://www.htmleaf.com。
接收信息
要在一个页面上监听信息，需要在它自己的window对象上设置onmessage时间处理函数。
下面是一个例子，它可以在Firefox和Chrome浏览器中工作：
window.onmessage = function(event) {
document.getElementById("show").innerHTML =
"Message Received: " + event.data
+ " from: " + event.origin;
};
这个例子中在window对象上设置onmessage函数。在函数中，代码选择id为show的HTML元素，在这个元素上设置文本“Message Received:”和接收到的信息。上面的代码是前面在iframe接收信息页面使用的js代码的一部分。
在Internet Explorer 9浏览器中，你需要使用下面的方法篮球监听信息：
window.attachEvent("onmessage", function(event) {
document.getElementById("show").innerHTML =
"Message Received: " + event.data
+ " from: " + event.origin;
});
为了兼容浏览器，你可以把上面的两段代码都写在接收信息的页面中。它们不会互相发生冲突。
事件event对象接收下面的三个属性：
dataoriginsource
data属性包含从发送页面发送过来的信息。
origin属性包含发送信息页面的域名。
source属性包含发送信息页面的window对象的引用。这个window对象的引用可以用于向发送信息页面回送信息。回送信息可以使用postMessage()方法。下面是一个例子：
window.onmessage = function(event) {
event.source.postMessage(
"Thank you for the message",
event.origin
);
}
发送JSON数据
HTML5 messaging API仅仅允许我们发送字符串信息。如果你需要发送一个javascript对象，你需要使用JSON.stringify()方法将它转换为一个JSON字符串，在接收页面再使用JSON.parse()方法来将它转换为javascript对象。下面是一个例子：
var theObject = { property1 : "hello", property2 : "world" };
var message = JSON.stringify(theObject);
var origin = "http://www.htmleaf.com";
var theIframe = document.getElementById("theIframe");
theIframe.contentWindow.postMessage(message, origin);
在接收页面使用下面的方法将JSON字符串转换为javascript对象。
window.onmessage = function(event) {
var theObject = JSON.parse(event.data);
}
