原文地址：HTML5′s window.postMessage API
在線示例：Using HTML5's window.postMessage(請(qǐng)打開(kāi)控制臺(tái)看日志)
我寫(xiě)了一個(gè) MooTools 的插件"PostMessager"來(lái)封裝window.postMessage,你可以點(diǎn)擊這里下載!
HTML5 的 window.postMessage 接口API 還沒(méi)有多少人了解。 window.postMessage允許多個(gè) window/frame之間跨域傳遞數(shù)據(jù)和信息。實(shí)質(zhì)上window.postMessage扮演了一個(gè)跨域Ajax請(qǐng)求的角色,當(dāng)然，并不需要遠(yuǎn)程服務(wù)器來(lái)協(xié)作。接下來(lái)將介紹window.postMessage的工作原理,以及如何在FireFox，IE8+，Opera，Safari和Chrome中使用它.
一、消息發(fā)送端
整個(gè)過(guò)程的第一步，是設(shè)定一個(gè)"消息源"。通過(guò)這個(gè)消息源，我們可以往新打開(kāi)的window(或者iframe)發(fā)送window級(jí)別的數(shù)據(jù)(消息)。在下面的示例中，給新窗口發(fā)送消息的頻率是每6秒一次，并設(shè)置事件監(jiān)聽(tīng)來(lái)處理目標(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');
// 定時(shí)發(fā)送消息
setInterval(function(){
var message = '現(xiàn)在時(shí)間: ' + (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)聽(tīng)設(shè)置函數(shù)是attachEvent
target.attachEvent("on"+noOnEventName,handler);
} else {
target["on"+noOnEventName]=handler;
}
};
// 監(jiān)聽(tīng)收到的信息.
bindEvent(window,'message',function(event) {
// 只接收特定域的消息
if(event.origin !== 'http://scriptandstyle.com') return;
trace('收到的響應(yīng)信息: ',event.data);
},false);
原文作者使用的是window.addEventListener方法來(lái)綁定事件，但是在IE下將會(huì)報(bào)錯(cuò)(IE是window.attachEvent).當(dāng)然，你可以創(chuàng)建函數(shù)來(lái)包裝事件，或者使用現(xiàn)成的類庫(kù)，比如MooTools或者jQuery/dojo來(lái)實(shí)現(xiàn)。
在上面的示例中，如果新窗口打開(kāi)正常，那我們可以通過(guò)window對(duì)象的引用myPopup發(fā)送消息,并指定必須匹配的URI(協(xié)議、主機(jī)名、端口號(hào))(如果用戶在子窗口中跳到其他頁(yè)面，則消息將不會(huì)發(fā)送).
同樣我們也綁定了事件處理函數(shù)來(lái)接收消息message。在此提醒，校驗(yàn)message事件的origin(源)屬性很重要,因?yàn)榭赡芙邮盏剿蠻RI發(fā)給自己的消息，在多個(gè)frame交互時(shí)才不至于混淆。 校驗(yàn)過(guò)origin之后，如何處理此消息，取決于你具體的業(yè)務(wù)和需求。
如果使用iframe的話，那么代碼如下：
// 同樣創(chuàng)建另一個(gè)window(iframe,frame,frameset,top,window這些都屬于window相關(guān)的對(duì)象。)
var domain = 'http://scriptandstyle.com';
var iframe = document.getElementById('myIFrame').contentWindow;
// 循環(huán)發(fā)送消息，當(dāng)然，也可以采用事件驅(qū)動(dòng)之類的。。。
setInterval(function(){
var message = '現(xiàn)在時(shí)間: ' + (new Date().getTime());
trace('數(shù)據(jù)源.發(fā)送的消息: ' + message);
iframe.postMessage(message,domain); //發(fā)送數(shù)據(jù)信息,并設(shè)置目標(biāo)URI
},6*1000);
確保能訪問(wèn)到iframe對(duì)象的contentWindow 屬性——而不僅僅是iframe對(duì)象。
二、消息接收端
整個(gè)流程的第二步就是讓目標(biāo)window就緒。目的窗口所要做的，就是監(jiān)聽(tīng)message事件，當(dāng)然也要驗(yàn)證事件的origin消息源。再次提醒：message事件處理函數(shù)可以接受任何域名發(fā)給他的消息，所以驗(yàn)證origin以及只處理信任列表的message非常重要。
// 監(jiān)聽(tīng)收到的信息.
bindEvent(window,'message',function(event) {
// 只接收特定域的消息
if(event.origin !== 'http://davidwalsh.name') return;
trace('監(jiān)聽(tīng)到信息: ',event.data);
// 回復(fù)消息
event.source.postMessage(""你好，小伙伴們，我已經(jīng)收到消息了,event.origin);
},false);
上面的示例回復(fù)了響應(yīng)信息給請(qǐng)求方。
message事件重要的屬性有：
source - 發(fā)送message的window/iframe對(duì)象
origin - 對(duì)應(yīng)著發(fā)送消息window的URI (protocol, domain, and port, 如果有指定的話)
data - 具體的數(shù)據(jù)信息
對(duì)于消息系統(tǒng)以及校驗(yàn)來(lái)說(shuō)，這三個(gè)對(duì)象是必不可少的。
window.postMessage 使用注意事項(xiàng)
就和其他所有的Web技術(shù)一樣，如果使用不當(dāng)(沒(méi)有驗(yàn)證事件源)那危險(xiǎn)性是顯而易見(jiàn)的。當(dāng)然，安全性由你自己來(lái)保證。
window.postMessage 很像JavaScript技術(shù)中的PHP(哈哈，小廣告！).window.postMessage 算是一種很酷炫的技術(shù)，你覺(jué)得呢？
