本篇內(nèi)容主要講解“HTML5中如何使用postMessage實現(xiàn)兩個網(wǎng)頁間傳遞數(shù)據(jù)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5中如何使用postMessage實現(xiàn)兩個網(wǎng)頁間傳遞數(shù)據(jù)”吧!

獨山網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站建設等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選成都創(chuàng)新互聯(lián)。

數(shù)據(jù)發(fā)送端

首先我們要做的是創(chuàng)建通信發(fā)起端，也就是數(shù)據(jù)源”source”。作為發(fā)起端，我們可以open一個新窗口，或創(chuàng)建一個iframe，往新窗口里發(fā)送數(shù)據(jù)，簡單起見，我們每6秒鐘發(fā)送一次，然后創(chuàng)建消息監(jiān)聽器，從目標窗口監(jiān)聽它反饋的信息。

JavaScript Code復制內(nèi)容到剪貼板

//彈出一個新窗口   

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

var myPopup = window.open(domain    

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

//周期性的發(fā)送消息   

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);   

//監(jiān)聽消息反饋   

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。

假設你的窗口正常的彈出來了，我們發(fā)送一條消息——需要指定URI(必要的話需要指定協(xié)議、主機、端口號等)，消息接收方必須在這個指定的URI上。如果目標窗口被替換了，消息將不會發(fā)出。

我們同時創(chuàng)建了一個事件監(jiān)聽器來接收反饋信息。有一點極其重要，你一定要驗證消息的來源的URI！只有在目標方合法的情況才你才能處理它發(fā)來的消息。

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

JavaScript Code復制內(nèi)容到剪貼板

//捕獲iframe   

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

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

//發(fā)送消息   

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屬性，而不是節(jié)點對象。

數(shù)據(jù)接收端

下面我們要開發(fā)的是數(shù)據(jù)接收端的頁面。接收方窗口里有一個事件監(jiān)聽器，監(jiān)聽“message”事件，一樣，你也需要驗證消息來源方的地址。消息可以來自任何地址，要確保處理的消息是來自一個可信的地址。

JavaScript Code復制內(nèi)容到剪貼板

//響應事件   

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);   

上面的代碼片段是往消息源反饋信息，確認消息已經(jīng)收到。下面是幾個比較重要的事件屬性：

source – 消息源，消息的發(fā)送窗口/iframe。

origin – 消息源的URI(可能包含協(xié)議、域名和端口)，用來驗證數(shù)據(jù)源。

data – 發(fā)送方發(fā)送給接收方的數(shù)據(jù)。

這三個屬性是消息傳輸中必須用到的數(shù)據(jù)。

使用window.postMessage

跟其他很web技術一樣，如果你不校驗數(shù)據(jù)源的合法性，那使用這種技術將會變得很危險；你的應用的安全需要你對它負責。window.postMessage就像是PHP相對于JavaScript技術。

到此，相信大家對“HTML5中如何使用postMessage實現(xiàn)兩個網(wǎng)頁間傳遞數(shù)據(jù)”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！