HTML5中頁面消息傳輸機制的示例分析

這篇文章主要介紹HTML5中頁面消息傳輸機制的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

HTML5 的Message API能夠讓HTML5頁面之間傳遞消息，甚至這些頁面可以不在同一樣域名下。

發送消息

為了讓消息能從一個頁面發送到另一個頁面，主動發送消息的頁面必須擁有另一個頁面的窗口引用。然后發送 頁面針對接受頁調用 postMessage() 方法。

代碼演示：

var message = "Hello there";  var origin  = "http://www.oschina.net";   var theIframe = document.getElementById("theIframe");   theIframe.contentWindow.postMessage(message, origin);

postMessage() 方法中 origin 參數的值必須與頁面所在的iframe的域名相匹配。否則將無法正常運行，這里 你不需要整個頁面的網址，而只需要主域名就夠了，例如 http://localhost 或 http://www.oschina.net

接受消息

為了能接受消息，頁面需要訂閱好onmessage事件的處理方法，以下就是能在Firefox與Chrome上正常運行的代碼：

window.onmessage = function(event) {      document.getElementById("show").innerHTML =              "Message Received: " + event.data            + " from: " + event.origin;  }

以上代碼設置好window的onmessage事件處理方法。然后在方法中找到id為"show"的html元素，然后設置此元 素的innerHTML為"Message received: "與真正的message。

在IE9下必須以這種代碼實現相同的功能。

window.attachEvent("onmessage", function(event) {      document.getElementById("show").innerHTML =              "Message Received: " + event.data            + " from: " + event.origin;  }

建議你在JS中保持這兩份代碼，它們之間是沒有沖突的。

事件對象將包含以下三個屬性。

data  origin  source

data屬性包含包含發送頁面發送過來的消息

origin屬性包含發送頁面的原始域名

source屬性包含發送頁面的window對象對應的引用。此window對象可以用來回復消息給原始的發送頁面，只需 要使用postMessage( )就行，如下就是代碼：

window.onmessage = function(event) {      event.source.postMessage(         "Thank you for the message",         event.origin      );  }

發送JSON

Messageing API只允許你發送字符串類型消息。如果你需要發送JavaScript對象，你將需要將此對象使用 JSON.stringify( ) 轉換成JSON字符串，接受后使用 JSON.parse( ) 方法翻譯成JavaScript對象。代碼如下：

var theObject = { property1 : "hello", property2 : "world" }  var message = JSON.stringify(theObject);  var origin  = "http://tutorials.jenkov.com";   var theIframe = document.getElementById("theIframe");   theIframe.contentWindow.postMessage(message, origin);

以下代碼就是如何將JSON字符串轉換成 JavaScript 對象。

window.onmessage = function(event) {      var theObject = JSON.parse(event.data);  }

以上是“HTML5中頁面消息傳輸機制的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！