HTML中postmessage的用法介紹-創(chuàng)新互聯(lián)
今天小編給大家分享的是HTML中postmessage的用法介紹，相信很多人都不太了解，為了讓大家更加了解HTML中postmessage的用法，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。
postmessage用法
關(guān)于html5的PostMessage的用法總結(jié)
大家都知道，網(wǎng)頁之間傳遞數(shù)據(jù)可以使用ajax請求來完成，今天我總結(jié)下我學(xué)習(xí)的postMessage是如何完成跨頁面請求數(shù)據(jù)的呢？首先，postMessage是html5新增的一個(gè)解決跨域的一個(gè)方法。那他是如何使用的呢？這里我把一個(gè)案例分享出來把。
看下面的代碼：
test.html
1.html
window.postMessage test接收區(qū)
首先，它的原理是這樣的。我就拿我的案例代碼來說吧。
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對象（也就是你要向誰通信），此時(shí)的window.parent的權(quán)限僅限于此，不能在像同域似的，進(jìn)行獲取父級的DOM元素，否則瀏覽器會(huì)報(bào)錯(cuò)，提示你不能進(jìn)行跨域訪問，我們再來看postMessage中所接收的參數(shù)，第一個(gè)參數(shù)就是你要像另外一個(gè)窗口傳遞的數(shù)據(jù)（只能傳字符串類型），第二個(gè)參數(shù)表示目標(biāo)窗口的源，協(xié)議+主機(jī)+端口號，是為了安全考慮，如果設(shè)置為“*”，則表示可以傳遞給任意窗口。
上面是單頁面交互的，下面給個(gè)雙頁面交互的。其實(shí)都是一樣的，不過就是 兩個(gè)頁面都寫了監(jiān)聽 發(fā)送事件。
test.html
page B
1.html
window.postMessage test接收區(qū)
page A
同樣的，1.html是主頁面。打開html，就可以實(shí)現(xiàn)交互了。
關(guān)于HTML中postmessage的用法介紹就分享到這里了，希望以上內(nèi)容可以對大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)站題目：HTML中postmessage的用法介紹-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://m.jiaotiyi.com/article/dpehic.html