免費(fèi)AI編程助手
在一個(gè)語言或者一門技術(shù)中都會(huì)有很多不同的技術(shù)手冊(cè)，這些手冊(cè)可以讓我們的學(xué)習(xí)和開發(fā)更加的完美，那么今天我們就講一下：“怎么學(xué)習(xí)HTML5中的手冊(cè)內(nèi)容？postMessage手冊(cè)學(xué)習(xí)使用方法分享！”這個(gè)問題吧！下面是小編整理的內(nèi)容和相關(guān)資料分享！
我們?cè)诖a代碼的時(shí)候，經(jīng)常會(huì)碰到以下跨域的情況：
1、頁面內(nèi)嵌套iframe，與iframe的消息傳遞
2、頁面與多個(gè)頁面之間的傳遞消息
針對(duì)這些令人頭疼的跨域問題，html5特地推出新功能--?postMessage?(跨文檔消息傳輸)。postMessage 在使用時(shí)，需要傳入2個(gè)參數(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? 打開另一個(gè)頁面，然后向他傳值。需要注意的是，使用 postMessage 傳值的時(shí)候需要使用?setTimeout?去延遲消息的傳遞，因?yàn)樽禹撁娴募虞d不是一下子就加載完成的，也就是說子頁面的監(jiān)聽事件還未開始，此時(shí)傳值過去是接收不到的。
在文中我們講到了怎么去實(shí)現(xiàn)：“怎么學(xué)習(xí)HTML5中的手冊(cè)內(nèi)容？postMessage手冊(cè)學(xué)習(xí)使用方法分享！”這個(gè)問題的相關(guān)內(nèi)容，當(dāng)然我們以后遇到類似的問題也會(huì)有所眉目，那么今天的分享就這些了，有喜歡html5這方面的小伙伴們都可以在W3Cschool中和小編一同學(xué)習(xí)更多的相關(guān)知識(shí)。
