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

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都做網(wǎng)站、西陵網(wǎng)絡(luò)推廣、小程序制作、西陵網(wǎng)絡(luò)營(yíng)銷、西陵企業(yè)策劃、西陵品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供西陵建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：chinadenli.net

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

發(fā)送消息

為了讓消息能從一個(gè)頁面發(fā)送到另一個(gè)頁面，主動(dòng)發(fā)送消息的頁面必須擁有另一個(gè)頁面的窗口引用。然后發(fā)送 頁面針對(duì)接受頁調(diào)用 postMessage() 方法。

代碼演示：

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

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

接受消息

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

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

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

在IE9下必須以這種代碼實(shí)現(xiàn)相同的功能。

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

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

事件對(duì)象將包含以下三個(gè)屬性。

data  origin  source

data屬性包含包含發(fā)送頁面發(fā)送過來的消息

origin屬性包含發(fā)送頁面的原始域名

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

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

發(fā)送JSON

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

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字符串轉(zhuǎn)換成 JavaScript 對(duì)象。

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

以上是“HTML5中頁面消息傳輸機(jī)制的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：HTML5中頁面消息傳輸機(jī)制的示例分析
網(wǎng)站路徑：http://chinadenli.net/article14/gohige.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、ChatGPT、小程序開發(fā)、網(wǎng)站營(yíng)銷、動(dòng)態(tài)網(wǎng)站、微信小程序

廣告

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