window.postMessage()實現跨域消息傳遞

window.postMessage() 方法能夠安全地實現跨源通訊。一般，對於兩個不一樣頁面的腳本，只有當執行它們的頁面位於具備相同的協議（一般爲https），

端口號（443爲https的默認值），以及主機  (兩個頁面的模數 Document.domain設置爲相同的值) 時，這兩個腳本才能相互通訊。window.postMessage() 

方法提供了一種受控機制來規避此限制，只要正確的使用，這種方法就很安全.

 

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow:

其餘窗口的一個引用，好比iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames。

• Window.open
• Window.opener
• HTMLIFrameElement.contentWindow(父窗體向子窗體發送消息)
• Window.parent(子窗體向父窗體發送消息)
• Window.frames +索引值

message:

將要發送到其餘 window的數據。它將會被結構化克隆算法序列化。這意味着你能夠不受什麼限制的將數據對象安全的傳送給目標窗口而無需本身序列化。

targetOrigin:

經過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值能夠是字符串"*"（表示無限制）或者一個URI。在發送消息的時候，若是目標窗口的協議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那麼消息就不會被髮送；只有三者徹底匹配，消息纔會被髮送。這個機制用來控制消息能夠發送到哪些窗口；例如，當用postMessage傳送密碼時，這個參數就顯得尤其重要，必須保證它的值與這條包含密碼的信息的預期接受者的origin屬性徹底一致，來防止密碼被惡意的第三方截獲。若是你明確的知道消息應該發送到哪一個窗口，那麼請始終提供一個有確切值的targetOrigin，而不是*。不提供確切的目標將致使數據泄露到任何對數據感興趣的惡意站點。

transfer :

可選是一串和message 同時傳遞的 Transferable 對象. 這些對象的全部權將被轉移給消息的接收方，而發送一方將再也不保有全部權。

 

window.addEventListener("message",function (event){

//do something

, false); 

event對象有三個屬性，分別是origin，data和source。

event.data表示接收到的消息；

event.origin表示postMessage的發送來源，包括協議，域名和端口；

event.source表示發送消息的窗口對象的引用; 

示例:

A頁面中包含一個iframe,iframe加載B頁面(父窗體與子窗體通訊)

A頁面代碼:

window.addEventListener('message', function(e) {
　　if (e.data.test=="Test") {
　　　　alert(e.data.test);
　　}
}, false);

 

B頁面代碼:   btnClick: function (o, e) {
　　window.parent.postMessage({ test: "Test"}, "*");

　　//{ test: "Test" }爲data屬性,"*" 爲origin屬性

}

A頁面中包含一個iframe,iframe加載B頁面(子窗體與父窗體通訊)

A頁面代碼:

function btnClick(o, e) {
document.getElementById("iframeContent").contentWindow.postMessage({ test: "Test"});
};

 

B頁面代碼: 

 window.addEventListener('message', function(e) {　　if (e.data.test=="Test") {　　　　alert(e.data.test);　　}}, false);