HTML5 API --- 跨文檔消息(cross-document message)簡介

爲什麼引入跨文檔消息機制？

現假設在一個網頁中包含有一個Frame子頁面，暫且稱網頁爲主頁面，Frame爲子頁面，一般情況下，主頁面需要傳遞消息給子頁面，完成對子頁面進行控制，典型的應用就是在頁面中嵌入廣告或嵌入地圖應用，廣告或地圖設計爲一個子Frame，它需要接收父頁面的控制消息，完成相應的廣告畫面變換或地圖位置的跳轉等功能。而這裏通常情況下廣告頁面或地圖頁面都是由第三方服務商提供的，所以它們和主頁面的往往不在同一域名下。這裏我們在主頁面中訪問子Frame中的變量或DOM節點，因爲瀏覽器爲了安全對此做了限制，禁止不在同一域名下的Frame相互訪問或修改彼此頁面內的變量或屬性，否則或拋出異常。

爲了解決上述問題，HTML5引入了跨文檔消息機制(cross-document message)，它允許多個頁面相互共享數據，並且不暴露頁面內部的DOM節點，這也保證了頁面不會因爲傳遞數據而遭到惡意攻擊。

實例代碼

假設頁面A包含一個Frame，該Frame中包含另外一個頁面B，它們處在不同的域名下，現在看看頁面A和頁面B如何實現跨文檔的通信。

A頁面中JavaScript代碼如下  

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

B頁面的JavaScript代碼如下

window.onmessage = function (event) {
if (event.origin == 'http://example.com') { // 可以過濾不需要的消息。
    if (event.data == 'Hello world') {
         event.source.postMessage('Hello', event.origin);
    } else {
      console.log(event.data);
    }
}};