HTML5 的 window.postMessage 接口API 還沒有多少人了解。 window.postMessage允許多個 window/frame之間跨域傳遞數(shù)據(jù)和信息。實(shí)質(zhì)上window.postMessage扮演了一個跨域Ajax請求的角色,當(dāng)然，并不需要遠(yuǎn)程服務(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來實(shí)現(xiàn)。
在上面的示例中，如果新窗口打開正常，那我們可以通過window對象的引用myPopup發(fā)送消息,并指定必須匹配的URI(協(xié)議、主機(jī)名、端口號)(如果用戶在子窗口中跳到其他頁面，則消息將不會發(fā)送).
同樣我們也綁定了事件處理函數(shù)來接收消息message。在此提醒，校驗(yàn)message事件的origin(源)屬性很重要,因?yàn)榭赡芙邮盏剿蠻RI發(fā)給自己的消息，在多個frame交互時才不至于混淆。 校驗(yàn)過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)然也要驗(yàn)證事件的origin消息源。再次提醒：message事件處理函數(shù)可以接受任何域名發(fā)給他的消息，所以驗(yàn)證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)以及校驗(yàn)來說，這三個對象是必不可少的。
window.postMessage 使用注意事項(xiàng)
就和其他所有的Web技術(shù)一樣，如果使用不當(dāng)(沒有驗(yàn)證事件源)那危險性是顯而易見的。當(dāng)然，安全性由你自己來保證。
window.postMessage 很像JavaScript技術(shù)中的PHP(哈哈，小廣告！).window.postMessage 算是一種很酷炫的技術(shù)，你覺得呢？