<del id="4ao22"></del>

H5 postMessage解決iframe跨域、跨窗口傳遞消息

Xufc 發布于2019-08-26 11:39 / 542人閱讀

摘要：今天填了一個利用嵌套頁面傳遞消息的坑。原傳遞消息舉例頁面頁面以上頁面為父頁面，為中新增的方法，可以實現跨文檔消息傳輸。返回窗口中所框架或。消息傳遞給頁面后，接收信息用觸發事件就可以接收接收的信息，具體信息在里面。

今天填了一個h5利用iframe嵌套頁面傳遞消息的坑。

原iframe傳遞消息舉例
js1.html頁面：

js2.html頁面：

以上js1頁面為父頁面，postMessage為HTML5中新增的postMessage方法，postMessage可以實現跨文檔消息傳輸。
window.frames 返回窗口中所框架或。frames.length可以查看有多少框架或 <iframe>，上面js1頁面只有一個iframe標簽所以frames.length=1，window.frames[0]選擇的就是給js2頁面傳遞消息。<br>消息傳遞給js2頁面后，接收信息用window.addEventListener觸發message事件就可以接收js1接收的信息，具體信息在e.data里面。</p> <p>不過！<br>坑來了。<br>嵌入的頁面不止一個iframe！頁面里添加了360和QQ的插件，兩個插件在頁面里動態添加了N個iframe，造成了js沖突，js2頁面沒有收到消息。</p> <p>例如：<br>js1.html頁面：</p> <pre><script> window.onload=function(){ window.frames[0].postMessage("This is data","*"); } </script> <div> <iframe id="child6" src="./js6.html">

js2.html頁面：

以上，js4、js5、js6頁面好比如為其他插件加載的iframe，我的js2一下就被頂的不知道加載到第幾位去了，笨方法可以frames.length看看有幾個框架，然后window.frames[N]一個個試，不過缺點是不穩定，兼容性太差了。那么上網查一下window.frames[N]其實是可以指定選擇框架的。

給自己的iframe加一個ID，window.frames[ID]就能指定加載js2的iframe。

但是！！非IE內核下window.frames["child"].postMessage(“XXXX”),失敗了！！！提示postMessage未定義！！！what f**k，什么鬼，這么皮。

打印一下 window.frames["child"]就會發現，返回的是dom對象。。所以不會有postMessage方法，更改之后改為window.frames["child"].contentWindow，用contentWindow把iframe的信息專換成window對象，這樣以后加載多少iframe都不怕了。

最終改進版即為：
js1.html頁面：

js2.html頁面：

GPU云服務器云服務器 iframe跨域實現跨域圖片跨域資源跨域

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107310.html

關于跨域簡單總結

摘要：開發者需要在中設置屬性為跨域是的簡稱這是一種利用瀏覽器漏洞解決跨域的辦法腳本元素可以不受瀏覽器同源策略的限制。什么是瀏覽器同源策略? 同源是指,域名,協議,端口號均相同,如圖: showImg(https://segmentfault.com/img/bV9rAO?w=1088&h=394); 注意:localhost和127.0.0.1雖然都指向本機,但也是跨域. 瀏覽器同源策略(...

learning 2019-08-22 16:45 評論0 收藏0
前端跨域

摘要：在所有以上提到的跨域方法中，不得不說都是利用了大大小小的漏洞來繞過同源策略。對于開發者來說最大的好處就是，無需考慮以什么樣的方式繞過同源策略請求跨域資源，直接使用即可。 HTML跨域傳統跨域方式 JSONP跨域說到傳統跨域方式，JSONP是最廣泛為人所知的形式了。對于JS來說，利用XMLHttpRequest無法請求非本域上的數據，但是卻可以加載非本域的JS文件。 JSONP...

Coding01 2019-08-20 16:19 評論0 收藏0
全解跨域請求處理辦法

摘要：跨域訪問的處理辦法及適用條件適用條件請求的接口需要支持訪問這里需要強調的是，不屬于的部分，它只是把放入標簽中實現的數據傳輸，不受同源策略限制。為什么會有跨域問題我們試想一下以下幾種情況：我們打開了一個天貓并且登錄了自己的賬號，這時我們再打開一個天貓的商品，我們不需要再進行一次登錄就可以直接購買商品，因為這兩個網頁是同源的，可以共享登錄相關的 cookie 或 localStor...

wua_wua2012 2019-08-23 12:13 評論0 收藏0