首頁 > web前端 > H5教程 > H5如何使用postMessage實現兩個網頁間傳遞數據

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

php中世界最好的语言
發布: 2018-01-09 09:28:27
原創
3758 人瀏覽過

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板