H5如何使用postMessage實現兩個網頁間傳遞數據

這次帶給大家H5如何使用postMessage實現兩個網頁間傳遞數據，怎麼用H5的postMessage實現兩個網頁間傳遞數據？ 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很酷，不是嗎？

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

vue.js做出圖書管理平台的詳細步驟

##bootstrap裡如何統計table sum的數量

怎麼用JS做出按鈕停用並啟用

以上是H5如何使用postMessage實現兩個網頁間傳遞數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！