HTML5 的Message API能夠讓HTML5頁面之間傳遞消息，甚至這些頁面可以不在同一樣域名下。

發送消息

為了讓消息能從一個頁面發送到另一個頁面，主動發送消息的頁面必須擁有另一個頁面的窗口引用。然后發送 頁面針對接受頁調用 postMessage() 方法。

代碼演示：

var message = "Hello there";  
var origin  = "http://www.oschina.net";  
 
var theIframe = document.getElementById("theIframe");  
 
theIframe.contentWindow.postMessage(message, origin); 

postMessage() 方法中 origin 參數的值必須與頁面所在的iframe的域名相匹配。否則將無法正常運行，這里 你不需要整個頁面的網址，而只需要主域名就夠了，例如 http://localhost 或 http://www.oschina.net

接受消息

為了能接受消息，頁面需要訂閱好onmessage事件的處理方法，以下就是能在Firefox與Chrome上正常運行的代碼：

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

以上代碼設置好window的onmessage事件處理方法。然后在方法中找到id為"show"的html元素，然后設置此元 素的innerHTML為"Message received: "與真正的message。

在IE9下必須以這種代碼實現相同的功能。

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

建議你在JS中保持這兩份代碼，它們之間是沒有沖突的。

事件對象將包含以下三個屬性。

data  
origin  
source 

data屬性包含包含發送頁面發送過來的消息

origin屬性包含發送頁面的原始域名

source屬性包含發送頁面的window對象對應的引用。此window對象可以用來回復消息給原始的發送頁面，只需 要使用postMessage( )就行，如下就是代碼：

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

發送JSON

Messageing API只允許你發送字符串類型消息。如果你需要發送JavaScript對象，你將需要將此對象使用 JSON.stringify( ) 轉換成JSON字符串，接受后使用 JSON.parse( ) 方法翻譯成JavaScript對象。代碼如下：

var theObject = { property1 : "hello", property2 : "world" }  
var message = JSON.stringify(theObject);  
var origin  = "http://tutorials.jenkov.com";  
 
var theIframe = document.getElementById("theIframe");  
 
theIframe.contentWindow.postMessage(message, origin); 

以下代碼就是如何將JSON字符串轉換成 JavaScript 對象。

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

原文鏈接 , OSChina.NET 原創翻譯