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

test.html

onmessage=function(e){

e=e||event;

document.write("my name is ",e.data);

document.body.style.background = 'red';

};

1.html

window.postMessage

test接收區(qū)

var f=document.getElementById("f");

//給框架網(wǎng)頁發(fā)送消息，然后收到之后，會(huì)傳送過來。

f.οnlοad=function(){

setTimeout(function(){

f.contentWindow.postMessage("謝霆鋒","http://localhost:8080");

},3000)

}

首先，它的原理是這樣的。我就拿我的案例代碼來說吧。

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

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

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

test.html

page B

send

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/'); // 若父頁面的域名和指定的不一致，則postMessage失敗

// parent.postMessage(data, '*'); // 觸發(fā)父頁面的message事件

}

1.html

window.postMessage

test接收區(qū)

page A

hello world

post message

function send() {

var data = document.querySelector('#data').value;

window.frames[0].postMessage(data, 'http://localhost:8080/'); // 觸發(fā)跨域子頁面的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);

————————————————

版權(quán)聲明：本文為CSDN博主「衣服架子」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/huijiaaa1/java/article/details/80952315

總結(jié)

以上是生活随笔為你收集整理的html5 通信方式,(原生js页面通信)关于html5的PostMessage的用法总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。