這次帶給大家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中文網其他相關文章！
