App下載

怎么學(xué)習(xí)HTML5中的手冊內(nèi)容?postMessage手冊學(xué)習(xí)使用方法分享!

猿友 2021-07-17 14:09:22 瀏覽數(shù) (1901)
反饋

在一個語言或者一門技術(shù)中都會有很多不同的技術(shù)手冊,這些手冊可以讓我們的學(xué)習(xí)和開發(fā)更加的完美,那么今天我們就講一下:“怎么學(xué)習(xí)HTML5中的手冊內(nèi)容?postMessage手冊學(xué)習(xí)使用方法分享!”這個問題吧!下面是小編整理的內(nèi)容和相關(guān)資料分享!

我們在碼代碼的時候,經(jīng)常會碰到以下跨域的情況:

1、頁面內(nèi)嵌套iframe,與iframe的消息傳遞

2、頁面與多個頁面之間的傳遞消息

針對這些令人頭疼的跨域問題,html5特地推出新功能--?postMessage?(跨文檔消息傳輸)。postMessage 在使用時,需要傳入2個參數(shù),?data?和?originUrl?。?data?是指需要傳遞的內(nèi)容,但是部分瀏覽器只能處理字符串參數(shù),所以我們一般把?data?序列化一下,即?JSON.stringify()?,?originUrl?是指目標(biāo)?url?,指定的窗口。

下面直接甩例子,相信大家更容易理解寫。

1、頁面內(nèi)嵌套iframe

父頁面:

html:

<div id='parent'>hello word postMessage</div>
<iframe src="http://127.0.0.1:8082/index2.html" id='child'></iframe>

js:

window.onload=function(){

    window.frames[0].postMessage('postMessage','http://127.0.0.1:8082/index2.html')

} 

window.addEventListener('message',function(e){

    console.log(e)

    document.getElementById('parent').style.color=e.data

})

子頁面:

html:

<div id='button' onclick='changeColor();' style="color:yellow">接受信息</div>

js:

window.addEventListener('message',function(e){

      console.log(e)

      let color = document.getElementById('button').style.color

      window.parent.postMessage(color,'http://127.0.0.1:8081/index.html')

});

function changeColor(){

      let buttonColor = document.getElementById('button').style.color

      buttonColor='#f00'           

      window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')

}

父頁面通過?postMessage?的方法向?iframe?傳遞消息,而子頁面通過?window.addEventListener?監(jiān)聽?message?方法來獲取到父頁面?zhèn)鬟f的值。如下圖所示,?data?是父頁面?zhèn)鬟f的值。

子頁面向父頁面?zhèn)鬟f消息,也是通過?postMessage?的方法去傳遞消息,不是過是以?window.parent.postMessage(data,url)?的方式傳值。父頁面獲取值也是同樣監(jiān)聽message事件。

2、多頁面之間傳遞消息

父頁面:

html:

<div id='parent' onclick="postMessage()">hello word postMessage</div>

js:

let parent = document.getElementById('parent')

function postMessage(){

    let windowOpen=window.open('http://127.0.0.1:8082/index2.html','postMessage')

    setTimeout(function(){

       windowOpen.postMessage('postMessageData','http://127.0.0.1:8082/index2.html')

  },1000) 

}

子頁面:

html:

<div id='button' onclick='changeColor();' style="color:#f00">接受信息</div>

js:

window.addEventListener('message',function(e){

      console.log(e)

 });

父頁面向子頁面?zhèn)鬟f消息通過 ?window.open? 打開另一個頁面,然后向他傳值。需要注意的是,使用 postMessage 傳值的時候需要使用?setTimeout?去延遲消息的傳遞,因為子頁面的加載不是一下子就加載完成的,也就是說子頁面的監(jiān)聽事件還未開始,此時傳值過去是接收不到的。

在文中我們講到了怎么去實現(xiàn):“怎么學(xué)習(xí)HTML5中的手冊內(nèi)容?postMessage手冊學(xué)習(xí)使用方法分享!”這個問題的相關(guān)內(nèi)容,當(dāng)然我們以后遇到類似的問題也會有所眉目,那么今天的分享就這些了,有喜歡html5這方面的小伙伴們都可以在W3Cschool中和小編一同學(xué)習(xí)更多的相關(guān)知識。 

0 人點贊