HTML5中使用postMessage實作兩個網頁間傳遞數據

估計很少人知道HTML5 APIS裡有一個window.postMessage API。 window.postMessage的功能是允許程式設計師跨網域在兩個視窗/frames間發送資料訊息。基本上，它就像是跨域的AJAX，但不是瀏覽器跟伺服器之間交互，而是在兩個客戶端之間通訊。讓我們來看看window.postMessage是如何運作的。除了IE6、IE7之外的所有瀏覽器都支援這個功能。

資料發送端

首先我們要做的是建立通訊發起端，也就是資料來源」source」。作為發起端，我們可以open一個新窗口，或創建一個iframe，往新窗口裡發送數據，簡單起見，我們每6秒鐘發送一次，然後創建消息監聽器，從目標窗口監聽它反饋的信息。

//弹出一个新窗口   

    var domain = 'http://scriptandstyle.com';   

    var myPopup = window.open(domain    

                + '/windowPostMessageListener.html','myWindow');   

      

    //周期性的发送消息   

    setInterval(function(){   

     var message = 'Hello!  The time is: ' + (new Date().getTime());   

     console.log('blog.local:  sending message:  ' + message);   

            //send the message and target URI   

     myPopup.postMessage(message,domain);   

    },6000);   

      

    //监听消息反馈   

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

     if(event.origin !== 'http://scriptandstyle.com') return;   

     console.log('received response:  ',event.data);   

    },false);

這裡我使用了window.addEventListener，但在IE裡這樣是不行的，因為IE使用window.attachEvent。如果你不想判斷瀏覽器的類型，可以使用一些工具庫，例如jQuery或Dojo。

假設你的視窗正常的彈出來了，我們發送一條訊息－需要指定URI(必要的話需要指定協定、主機、連接埠號碼等)，訊息接收方必須在這個指定的URI上。如果目標視窗被取代了，訊息將不會發出。

我們同時建立了一個事件監聽器來接收回饋訊息。有一點極為重要，你一定要驗證訊息的來源的URI！只有在目標方合法的情況才你才能處理它所發的訊息。

如果是使用iframe，程式碼應該這樣寫：

//捕获iframe   

    var domain = 'http://scriptandstyle.com';   

    var iframe = document.getElementById('myIFrame').contentWindow;   

      

    //发送消息   

    setInterval(function(){   

     var message = 'Hello!  The time is: ' + (new Date().getTime());   

     console.log('blog.local:  sending message:  ' + message);   

            //send the message and target URI   

     iframe.postMessage(message,domain);    

    },6000);

確保你使用的是iframe的contentWindow屬性，而不是節點物件。

資料接收端

下面我們要開發的是資料接收端的頁面。接收方視窗裡有一個事件監聽器，監聽「message」事件，一樣，你也需要驗證訊息來源方的位址。訊息可以來自任何地址，要確保處理的訊息是來自一個可信賴的地址。

//响应事件   

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

     if(event.origin !== 'http://davidwalsh.name') return;   

     console.log('message received:  ' + event.data,event);   

     event.source.postMessage('holla back youngin!',event.origin);   

    },false);

上面的程式碼片段是往訊息來源回饋訊息，確認訊息已經收到。以下是幾個比較重要的事件屬性：

source – 訊息來源，訊息的傳送視窗/iframe。
origin – 訊息來源的URI(可能包含協定、網域名稱和連接埠)，用來驗證資料來源。
data – 發送方傳送給接收方的資料。

這三個屬性是訊息傳輸中必須用到的資料。

使用window.postMessage

跟其他很web技術一樣，如果你不校驗資料來源的合法性，那麼使用這種技術將會變得很危險；你的應用的安全需要你對它負責。 window.postMessage就像是PHP相對於JavaScript技術。 window.postMessage很酷，不是嗎？

 以上是HTML5中使用postMessage實作兩個網頁間傳遞資料 的內容，並有更多相關內容請關注PHP中文網站（www.php.cn）！