本篇內(nèi)容介紹了“HTML5中怎么實現(xiàn)兩個網(wǎng)頁間傳遞數(shù)據(jù)”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)岳普湖免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

估計很少人知道HTML5 APIS里有一個window.postMessage API。window.postMessage的功能是允許程序員跨域在兩個窗口/frames間發(fā)送數(shù)據(jù)信息?；旧?，它就像是跨域的AJAX，但不是瀏覽器跟服務(wù)器之間交互，而是在兩個客戶端之間通信。讓我們來看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有瀏覽器都支持這個功能。

數(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復(fù)制內(nèi)容到剪貼板

1. //彈出一個新窗口  

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

3. var myPopup = window.open(domain    

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

5.   

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

7. setInterval(function(){   

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

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

10.         //send the message and target URI  

11.  myPopup.postMessage(message,domain);   

12. },6000);   

13.   

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

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

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

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

18. },false);   

19.   

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

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

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

如果是使用iframe，代碼應(yīng)該這樣寫：

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

1. //捕獲iframe  

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

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

4.   

5. //發(fā)送消息  

6. setInterval(function(){   

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

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

9.         //send the message and target URI  

10.  iframe.postMessage(message,domain);    

11. },6000);   

12.   

確保你使用的是iframe的contentWindow屬性，而不是節(jié)點對象。

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

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

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

1. //響應(yīng)事件  

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

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

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

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

6. },false);   

7.   

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

source –消息源，消息的發(fā)送窗口/iframe。
origin –消息源的URI(可能包含協(xié)議、域名和端口)，用來驗證數(shù)據(jù)源。
data –發(fā)送方發(fā)送給接收方的數(shù)據(jù)。

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

使用window.postMessage

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

“HTML5中怎么實現(xiàn)兩個網(wǎng)頁間傳遞數(shù)據(jù)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

網(wǎng)頁題目：HTML5中怎么實現(xiàn)兩個網(wǎng)頁間傳遞數(shù)據(jù)
網(wǎng)頁路徑：http://www.rwnh.cn/article8/gcgpop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、域名注冊、全網(wǎng)營銷推廣、網(wǎng)站維護、商城網(wǎng)站、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)