溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“HTML5中怎么實現兩個網頁間傳遞數據”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
估計很少人知道HTML5 APIS里有一個window.postMessage API。window.postMessage的功能是允許程序員跨域在兩個窗口/frames間發送數據信息。基本上，它就像是跨域的AJAX，但不是瀏覽器跟服務器之間交互，而是在兩個客戶端之間通信。讓我們來看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有瀏覽器都支持這個功能。
數據發送端
首先我們要做的是創建通信發起端，也就是數據源”source”。作為發起端，我們可以open一個新窗口，或創建一個iframe，往新窗口里發送數據，簡單起見，我們每6秒鐘發送一次，然后創建消息監聽器，從目標窗口監聽它反饋的信息。
JavaScript Code復制內容到剪貼板
//彈出一個新窗口
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，代碼應該這樣寫：
JavaScript Code復制內容到剪貼板
//捕獲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”事件，一樣，你也需要驗證消息來源方的地址。消息可以來自任何地址，要確保處理的消息是來自一個可信的地址。
JavaScript Code復制內容到剪貼板
//響應事件
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很酷，不是嗎？
“HTML5中怎么實現兩個網頁間傳遞數據”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
