HTML5 的 window.postMessage 接口API 還沒有多少人了解。 window.postMessage允許多個 window/frame之間跨域傳遞數(shù)據(jù)和信息。實質(zhì)上window.postMessage扮演了一個跨域Ajax請求的角色,當(dāng)然，并不需要遠程服務(wù)器來協(xié)作。接下來將介紹window.postMessage的工作原理,以及如何在FireFox，IE8+，Opera，Safari和Chrome中使用它.

一、消息發(fā)送端

整個過程的第一步，是設(shè)定一個"消息源"。通過這個消息源，我們可以往新打開的window(或者iframe)發(fā)送window級別的數(shù)據(jù)(消息)。在下面的示例中，給新窗口發(fā)送消息的頻率是每6秒一次，并設(shè)置事件監(jiān)聽來處理目標(biāo)window返回的響應(yīng)信息。

代碼如下:

function trace(message){

var infos = Array.prototype.slice.call(arguments,0).join(" ");

if("console" in window){

console.log(infos);

} else {

alert(infos);

}

};

// 創(chuàng)建彈出窗口

var domain = 'http://scriptandstyle.com';

var myPopup = window.open(domain + '/windowPostMessageListener.html','myWindow');

// 定時發(fā)送消息

setInterval(function(){

var message = '現(xiàn)在時間: ' + (new Date().getTime());

trace('數(shù)據(jù)源.發(fā)送的消息: ' + message);

myPopup.postMessage(message,domain); //發(fā)送數(shù)據(jù)信息,并設(shè)置目標(biāo)URI

},6*1000);

function bindEvent(target,noOnEventName,handler){

if(window.addEventListener){

target.addEventListener(noOnEventName,handler);

} else if(window.attachEvent){

// IE 的監(jiān)聽設(shè)置函數(shù)是attachEvent

target.attachEvent("on"+noOnEventName,handler);

} else {

target["on"+noOnEventName]=handler;

}

};

// 監(jiān)聽收到的信息.

bindEvent(window,'message',function(event) {

// 只接收特定域的消息

if(event.origin !== 'http://scriptandstyle.com') return;

trace('收到的響應(yīng)信息: ',event.data);

},false);

原文作者使用的是window.addEventListener方法來綁定事件，但是在IE下將會報錯(IE是window.attachEvent).當(dāng)然，你可以創(chuàng)建函數(shù)來包裝事件，或者使用現(xiàn)成的類庫，比如MooTools或者jQuery/dojo來實現(xiàn)。

在上面的示例中，如果新窗口打開正常，那我們可以通過window對象的引用myPopup發(fā)送消息,并指定必須匹配的URI(協(xié)議、主機名、端口號)(如果用戶在子窗口中跳到其他頁面，則消息將不會發(fā)送).

同樣我們也綁定了事件處理函數(shù)來接收消息message。在此提醒，校驗message事件的origin(源)屬性很重要,因為可能接收到所有URI發(fā)給自己的消息，在多個frame交互時才不至于混淆。 校驗過origin之后，如何處理此消息，取決于你具體的業(yè)務(wù)和需求。

如果使用iframe的話，那么代碼如下：

代碼如下:

// 同樣創(chuàng)建另一個window(iframe,frame,frameset,top,window這些都屬于window相關(guān)的對象。)

var domain = 'http://scriptandstyle.com';

var iframe = document.getElementById('myIFrame').contentWindow;

// 循環(huán)發(fā)送消息，當(dāng)然，也可以采用事件驅(qū)動之類的。。。

setInterval(function(){

var message = '現(xiàn)在時間: ' + (new Date().getTime());

trace('數(shù)據(jù)源.發(fā)送的消息: ' + message);

iframe.postMessage(message,domain); //發(fā)送數(shù)據(jù)信息,并設(shè)置目標(biāo)URI

},6*1000);

確保能訪問到iframe對象的contentWindow 屬性——而不僅僅是iframe對象。

二、消息接收端

整個流程的第二步就是讓目標(biāo)window就緒。目的窗口所要做的，就是監(jiān)聽message事件，當(dāng)然也要驗證事件的origin消息源。再次提醒：message事件處理函數(shù)可以接受任何域名發(fā)給他的消息，所以驗證origin以及只處理信任列表的message非常重要。

代碼如下:

// 監(jiān)聽收到的信息.

bindEvent(window,'message',function(event) {

// 只接收特定域的消息

if(event.origin !== 'http://davidwalsh.name') return;

trace('監(jiān)聽到信息: ',event.data);

// 回復(fù)消息

event.source.postMessage(""你好，小伙伴們，我已經(jīng)收到消息了,event.origin);

},false);

上面的示例回復(fù)了響應(yīng)信息給請求方。

message事件重要的屬性有：

source - 發(fā)送message的window/iframe對象

origin - 對應(yīng)著發(fā)送消息window的URI (protocol, domain, and port, 如果有指定的話)

data - 具體的數(shù)據(jù)信息

對于消息系統(tǒng)以及校驗來說，這三個對象是必不可少的。

window.postMessage 使用注意事項

就和其他所有的Web技術(shù)一樣，如果使用不當(dāng)(沒有驗證事件源)那危險性是顯而易見的。當(dāng)然，安全性由你自己來保證。

window.postMessage 很像JavaScript技術(shù)中的PHP(哈哈，小廣告！).window.postMessage 算是一種很酷炫的技術(shù)，你覺得呢？