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

發(fā)送消息

為了讓消息能從一個(gè)頁(yè)面發(fā)送到另一個(gè)頁(yè)面，主動(dòng)發(fā)送消息的頁(yè)面必須擁有另一個(gè)頁(yè)面的窗口引用。然后發(fā)送 頁(yè)面針對(duì)接受頁(yè)調(diào)用 postMessage() 方法。

代碼演示：

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

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

接受消息

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

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

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

在IE9下必須以這種代碼實(shí)現(xiàn)相同的功能。

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

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

事件對(duì)象將包含以下三個(gè)屬性。

data  
origin  
source 

data屬性包含包含發(fā)送頁(yè)面發(fā)送過(guò)來(lái)的消息

origin屬性包含發(fā)送頁(yè)面的原始域名

source屬性包含發(fā)送頁(yè)面的window對(duì)象對(duì)應(yīng)的引用。此window對(duì)象可以用來(lái)回復(fù)消息給原始的發(fā)送頁(yè)面，只需 要使用postMessage( )就行，如下就是代碼：

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

發(fā)送JSON

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

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字符串轉(zhuǎn)換成 JavaScript 對(duì)象。

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

原文鏈接 , OSChina.NET 原創(chuàng)翻譯