HTML5 window/iframe跨網域傳遞訊息 API介紹_html5教學技巧

原文網址：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. 🎜>// 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 算是一種很酷炫的技術，你覺得呢？