HTML中postmessage的用法介紹-創(chuàng)新互聯(lián)

今天小編給大家分享的是HTML中postmessage的用法介紹，相信很多人都不太了解，為了讓大家更加了解HTML中postmessage的用法，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

成都創(chuàng)新互聯(lián)公司專(zhuān)注骨干網(wǎng)絡(luò)服務(wù)器租用十多年，服務(wù)更有保障！服務(wù)器租用，IDC機(jī)房托管 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問(wèn)。靈活、實(shí)現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專(zhuān)屬高性能服務(wù)器。

postmessage用法

關(guān)于html5的PostMessage的用法總結(jié)

大家都知道，網(wǎng)頁(yè)之間傳遞數(shù)據(jù)可以使用ajax請(qǐng)求來(lái)完成，今天我總結(jié)下我學(xué)習(xí)的postMessage是如何完成跨頁(yè)面請(qǐng)求數(shù)據(jù)的呢？首先，postMessage是html5新增的一個(gè)解決跨域的一個(gè)方法。那他是如何使用的呢？這里我把一個(gè)案例分享出來(lái)把。

看下面的代碼：

test.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
</body>
<script>
onmessage=function(e){
  e=e||event;
  document.write("my name is ",e.data);
   document.body.style.background = 'red';
};
</script>
</html>

1.html

<!DOCTYPE html>
<html>
<head>
<title>window.postMessage</title>
<meta charset="utf-8"/>
<h2>test接收區(qū)</h2>
</head>
<body>
 
</body>
<iframe id="f" src="http://localhost:8080/chajian/test.html"></iframe>
<script>
var f=document.getElementById("f");
//給框架網(wǎng)頁(yè)發(fā)送消息，然后收到之后，會(huì)傳送過(guò)來(lái)。
f.οnlοad=function(){
 setTimeout(function(){
  f.contentWindow.postMessage("謝霆鋒","http://localhost:8080");
 },3000)
}
</script>
</html>

首先，它的原理是這樣的。我就拿我的案例代碼來(lái)說(shuō)吧。

1.html里面鑲嵌了一個(gè)iframe網(wǎng)頁(yè) 框架，他就是靠這里傳輸數(shù)據(jù)的，等1.html加載完成之后，他會(huì)主動(dòng)發(fā)給test.html 謝霆鋒，然后test.html收到之后，它里面有接收消息的處理函數(shù)，他收到消息之后，立馬 ，給網(wǎng)頁(yè)返回 一段字符串，然后把自己的背景改成紅色。這樣就達(dá)到了網(wǎng)頁(yè)互動(dòng)的效果，可惜的是，萬(wàn)惡的ie6.7不支持，兼容度不高。

注意：postMessage的寫(xiě)法，postMessage之前寫(xiě)的是你要通信的window對(duì)象（也就是你要向誰(shuí)通信），此時(shí)的window.parent的權(quán)限僅限于此，不能在像同域似的，進(jìn)行獲取父級(jí)的DOM元素，否則瀏覽器會(huì)報(bào)錯(cuò)，提示你不能進(jìn)行跨域訪問(wèn)，我們?cè)賮?lái)看postMessage中所接收的參數(shù)，第一個(gè)參數(shù)就是你要像另外一個(gè)窗口傳遞的數(shù)據(jù)（只能傳字符串類(lèi)型），第二個(gè)參數(shù)表示目標(biāo)窗口的源，協(xié)議+主機(jī)+端口號(hào)，是為了安全考慮，如果設(shè)置為“*”，則表示可以傳遞給任意窗口。

上面是單頁(yè)面交互的，下面給個(gè)雙頁(yè)面交互的。其實(shí)都是一樣的，不過(guò)就是 兩個(gè)頁(yè)面都寫(xiě)了監(jiān)聽(tīng) 發(fā)送事件。

test.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
<h2 class="header">page B</h2>
 
<input type="text" id="inp" value="我想你">
<button οnclick="send()">send</button>
</body>
 
 
<script>
window.addEventListener('message', function(ev) {
    // if (ev.source !== window.parent) {return;}
    var data = ev.data;
  document.write("my name is ",data);
   document.body.style.background = 'red';
}, false);
 
function send() {
    var data = document.querySelector('#inp').value;
    parent.postMessage(data, 'http://localhost:8080/'); // 若父頁(yè)面的域名和指定的不一致，則postMessage失敗
    // parent.postMessage(data, '*'); // 觸發(fā)父頁(yè)面的message事件
}
</script>
</html>

1.html

<!DOCTYPE html>
<html>
<head>
<title>window.postMessage</title>
<meta charset="utf-8"/>
<h2>test接收區(qū)</h2>
</head>
<body>
 
 
<h2 class="header">page A</h2>
<div class="mb20">
    <textarea name="ta" id="data" cols="30" rows="5">hello world</textarea>
    <button style="font-size:20px;" οnclick="send()">post message</button>
</div>
<!-- 跨域的情況 -->
<iframe src="http://localhost:8080/chajian/test.html" id="child" style="display: block; border: 1px dashed #ccc; height: 300px;"></iframe>
 
<script>
function send() {
    var data = document.querySelector('#data').value;
 
   window.frames[0].postMessage(data, 'http://localhost:8080/'); // 觸發(fā)跨域子頁(yè)面的messag事件
}
 
window.addEventListener('message', function(messageEvent) {
    var data = messageEvent.data; 
    console.info('message from child:', data);
    document.write("收到了數(shù)據(jù)： ",data);
    document.body.style.background = 'red';
}, false);
</script>
</body>
</html>

同樣的，1.html是主頁(yè)面。打開(kāi)html，就可以實(shí)現(xiàn)交互了。

關(guān)于HTML中postmessage的用法介紹就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

文章標(biāo)題：HTML中postmessage的用法介紹-創(chuàng)新互聯(lián)
文章路徑：http://muchs.cn/article2/dpehic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、App設(shè)計(jì)、軟件開(kāi)發(fā)、面包屑導(dǎo)航、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站導(dǎo)航

廣告

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

小程序開(kāi)發(fā)