資訊專欄INFORMATION COLUMN
摘要：今天填了一個(gè)利用嵌套頁(yè)面?zhèn)鬟f消息的坑。原傳遞消息舉例頁(yè)面頁(yè)面以上頁(yè)面為父頁(yè)面，為中新增的方法，可以實(shí)現(xiàn)跨文檔消息傳輸。返回窗口中所框架或。消息傳遞給頁(yè)面后，接收信息用觸發(fā)事件就可以接收接收的信息，具體信息在里面。
今天填了一個(gè)h5利用iframe嵌套頁(yè)面?zhèn)鬟f消息的坑。
原iframe傳遞消息舉例
js1.html頁(yè)面：
js2.html頁(yè)面：
以上js1頁(yè)面為父頁(yè)面，postMessage為HTML5中新增的postMessage方法，postMessage可以實(shí)現(xiàn)跨文檔消息傳輸。
window.frames 返回窗口中所框架或
js2.html頁(yè)面：
以上，js4、js5、js6頁(yè)面好比如為其他插件加載的iframe，我的js2一下就被頂?shù)牟恢兰虞d到第幾位去了，笨方法可以frames.length看看有幾個(gè)框架，然后window.frames[N]一個(gè)個(gè)試，不過(guò)缺點(diǎn)是不穩(wěn)定，兼容性太差了。那么上網(wǎng)查一下window.frames[N]其實(shí)是可以指定選擇框架的。
給自己的iframe加一個(gè)ID，window.frames[ID]就能指定加載js2的iframe。
但是！！非IE內(nèi)核下window.frames["child"].postMessage(“XXXX”),失敗了?。?！提示postMessage未定義?。?！what f**k，什么鬼，這么皮。
打印一下 window.frames["child"]就會(huì)發(fā)現(xiàn)，返回的是dom對(duì)象。。所以不會(huì)有postMessage方法，更改之后改為window.frames["child"].contentWindow，用contentWindow把iframe的信息專換成window對(duì)象，這樣以后加載多少iframe都不怕了。
最終改進(jìn)版即為：
js1.html頁(yè)面：
js2.html頁(yè)面：
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107310.html
摘要：開發(fā)者需要在中設(shè)置屬性為跨域是的簡(jiǎn)稱這是一種利用瀏覽器漏洞解決跨域的辦法腳本元素可以不受瀏覽器同源策略的限制。 什么是瀏覽器同源策略? 同源是指,域名,協(xié)議,端口號(hào)均相同,如圖: showImg(https://segmentfault.com/img/bV9rAO?w=1088&h=394); 注意:localhost和127.0.0.1雖然都指向本機(jī),但也是跨域. 瀏覽器同源策略(...
摘要：在所有以上提到的跨域方法中，不得不說(shuō)都是利用了大大小小的漏洞來(lái)繞過(guò)同源策略。對(duì)于開發(fā)者來(lái)說(shuō)最大的好處就是，無(wú)需考慮以什么樣的方式繞過(guò)同源策略請(qǐng)求跨域資源，直接使用即可。 HTML跨域 傳統(tǒng)跨域方式 JSONP跨域 說(shuō)到傳統(tǒng)跨域方式，JSONP是最廣泛為人所知的形式了。 對(duì)于JS來(lái)說(shuō)，利用XMLHttpRequest無(wú)法請(qǐng)求非本域上的數(shù)據(jù)，但是卻可以加載非本域的JS文件。 JSONP...
摘要：跨域訪問(wèn)的處理辦法及適用條件適用條件請(qǐng)求的接口需要支持訪問(wèn)這里需要強(qiáng)調(diào)的是，不屬于的部分，它只是把放入標(biāo)簽中實(shí)現(xiàn)的數(shù)據(jù)傳輸，不受同源策略限制。 為什么會(huì)有跨域問(wèn)題 我們?cè)囅胍幌乱韵聨追N情況： 我們打開了一個(gè)天貓并且登錄了自己的賬號(hào)，這時(shí)我們?cè)俅蜷_一個(gè)天貓的商品，我們不需要再進(jìn)行一次登錄就可以直接購(gòu)買商品，因?yàn)檫@兩個(gè)網(wǎng)頁(yè)是同源的，可以共享登錄相關(guān)的 cookie 或 localStor...
閱讀 1313·2021-10-08 10:05
閱讀 4135·2021-09-22 15:54
閱讀 3115·2021-08-27 16:18
閱讀 3118·2019-08-30 15:55
閱讀 1451·2019-08-29 12:54
閱讀 2758·2019-08-26 11:42
閱讀 557·2019-08-26 11:39
閱讀 2139·2019-08-26 10:11
