HTML5新特性之跨文檔消息傳輸

一、同域限制

所謂「同域限制」是指，出於安全考慮，瀏覽器只容許腳本與一樣協議、一樣域名、一樣端口的地址進行通訊。

二、window.postMessage方法

瀏覽器限制不一樣窗口（包括iFrame窗口）之間的通訊，除非兩個窗口裝載的是同一個域名下的網頁。window.postMessage方法就是爲了解決這個問題而特定的API，可讓不一樣域名的窗口互相通訊。

postMessage方法的格式以下：

targetWindow.postMessage(message, targetURL[, transferObject]);

上面代碼的targetWindow是指向目標窗口的變量，message是要發送的消息，targetURL是指定目標窗口的網址，不符合該網址就不發送信息，transferObject則是跟隨信息一塊兒發送的Transferable對象。

假定當前網頁彈出一個新窗口。

var popup = window.open(...popup details ...);

而後在當前網頁上監聽message事件。

window.addEventListener('message', receiveMessage, false);

function receiveMessage(e) {
    if (e.origin != 'http://example.org') {
        return;
    }

    console.log(e.data);
}

上面的代碼指定message事件的回調函數是receiveMessage，一旦收到其餘窗口發來的信息，receiveMessage函數就會被調用。receiveMessage函數接受一個event事件對象做爲參數，該參數裏的origin屬性表示信息的來源網址，若是該網址不符合要求，就馬上返回。event.data屬性則包含了實際發送過來的信息。

event對象的屬性除了origin和data，還有一個source屬性，指向向當前網頁發送信息的窗口對象。

接着，在當前網頁上使用postMessage方法對新窗口發送信息。

popup.postMessage('hello world!', 'http://example.org');

上面代碼的postMessage方法的第一個參數是實際發送的信息，第二個參數是指定發送對象的域名必須是http://example.org。若是對方窗口不是這個域名，信息不會發送出去。

最後，在popup窗口中部署下面的代碼。

//popup 窗口

function receiveMessage(event) {
    event.source.postMessage('Nice to see you!', '*');
}

window.addEvengtListener('message', receiveMessage, false);

上面代碼有幾個地方須要注意。首先，receiveMessage函數裏面沒有過濾信息的來源，任意網址發來的信息都會被處理。其次，postMessage方法中指定的目標窗口的網址是一個星號，表示該信息能夠向任意網址發送。一般來講，這兩種作法是不推薦的，由於不夠安全，可能會被對方過濾掉。

全部瀏覽器都支持這個方法，可是IE8和IE9只容許postMessage方法與iFrame窗口通訊，不能與新窗口通訊。IE10容許與新窗口通訊，可是隻能使用IE特有的MessageChannel對象。

三、參考連接

[1] Mozilla Developer Network, Window.postMessage

[2] Stack Overflow, Is cross-origin postMessage broken in IE10?

[3] ruanyifeng, 同域限制和window.postMessage方法