HTML5 window/iframe跨域傳遞消息 API介紹

window.postMessage允許多個 window/frame之間跨域傳遞數據和信息。下面為大家介紹下window.postMessage的工作原理,以及如何在FireFox，IE8+，Opera，Safari和Chrome中使用它

 

原文地址：HTML5′s window.postMessage API
在線示例：Using HTML5's window.postMessage(請打開控制台看日志)

我寫了一個 MooTools 的插件"PostMessager"來封裝window.postMessage,你可以點擊這裡下載!

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

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

復制代碼 代碼如下:
function trace(message){
var infos = Array.prototype.slice.call(arguments,0).join(" ");
if("console" in window){
console.log(infos);
} else {
alert(infos);
}
};
// 創建彈出窗口
var domain = 'http://scriptandstyle.com';
var myPopup = window.open(domain + '/windowPostMessageListener.html','myWindow');
// 定時發送消息
setInterval(function(){
var message = '現在時間: ' + (new Date().getTime());
trace('數據源.發送的消息: ' + message);
myPopup.postMessage(message,domain); //發送數據信息,並設置目標URI
},6*1000);
function bindEvent(target,noOnEventName,handler){
if(window.addEventListener){
target.addEventListener(noOnEventName,handler);
} else if(window.attachEvent){
// IE 的監聽設置函數是attachEvent
target.attachEvent("on"+noOnEventName,handler);
} else {
target["on"+noOnEventName]=handler;
}
};
// 監聽收到的信息.
bindEvent(window,'message',function(event) {
// 只接收特定域的消息
if(event.origin !== 'http://scriptandstyle.com') return;
trace('收到的響應信息: ',event.data);
},false);

原文作者使用的是window.addEventListener方法來綁定事件，但是在IE下將會報錯(IE是window.attachEvent).當然，你可以創建函數來包裝事件，或者使用現成的類庫，比如MooTools或者jQuery/dojo來實現。
在上面的示例中，如果新窗口打開正常，那我們可以通過window對象的引用myPopup發送消息,並指定必須匹配的URI(協議、主機名、端口號)(如果用戶在子窗口中跳到其他頁面，則消息將不會發送).
同 樣我們也綁定了事件處理函數來接收消息message。在此提醒，校驗message事件的origin(源)屬性很重要,因為可能接收到所有URI發給 自己的消息，在多個frame交互時才不至於混淆。 校驗過origin之後，如何處理此消息，取決於你具體的業務和需求。

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

復制代碼 代碼如下:
// 同樣創建另一個window(iframe,frame,frameset,top,window這些都屬於window相關的對象。)
var domain = 'http://scriptandstyle.com';
var iframe = document.getElementById('myIFrame').contentWindow;
// 循環發送消息，當然，也可以采用事件驅動之類的。。。
setInterval(function(){
var message = '現在時間: ' + (new Date().getTime());
trace('數據源.發送的消息: ' + message);
iframe.postMessage(message,domain); //發送數據信息,並設置目標URI
},6*1000);

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

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

復制代碼 代碼如下:
// 監聽收到的信息.
bindEvent(window,'message',function(event) {
// 只接收特定域的消息
if(event.origin !== 'http://davidwalsh.name') return;
trace('監聽到信息: ',event.data);
// 回復消息
event.source.postMessage(""你好，小伙伴們，我已經收到消息了,event.origin);
},false);

上面的示例回復了響應信息給請求方。
message事件重要的屬性有：
source - 發送message的window/iframe對象
origin - 對應著發送消息window的URI (protocol, domain, and port, 如果有指定的話)
data - 具體的數據信息
對於消息系統以及校驗來說，這三個對象是必不可少的。

window.postMessage 使用注意事項
就和其他所有的Web技術一樣，如果使用不當(沒有驗證事件源)那危險性是顯而易見的。當然，安全性由你自己來保證。
window.postMessage 很像JavaScript技術中的PHP(哈哈，小廣告！).window.postMessage 算是一種很酷炫的技術，你覺得呢？