H5 postMessage解决iframe跨域、跨窗口传递消息

Xufc 发布于2019-08-26 11:39 / 525人阅读

摘要：今天填了一个利用嵌套页面传递消息的坑。原传递消息举例页面页面以上页面为父页面，为中新增的方法，可以实现跨文档消息传输。返回窗口中所框架或。消息传递给页面后，接收信息用触发事件就可以接收接收的信息，具体信息在里面。

今天填了一个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跨域实现跨域图片跨域资源跨域

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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