H5 postMessage处理iframe跨域、跨窗口通报音讯

2024年5月26日 173次阅读 来源: kingHalo丶一文

本日填了一个h5应用iframe嵌套页面通报音讯的坑。

原iframe通报音讯举例
js1.html页面：

<script>
window.onload=function(){
    window.frames[0].postMessage('This is data','*');
}
</script>
<div>
    <iframe id="child" src="./js2.html"></iframe>
</div>

js2.html页面：

<script>
window.addEventListener("message", function(e){
     console.log(e);
 }, false);
</script>

以上js1页面为父页面，postMessage为HTML5中新增的postMessage要领，postMessage能够完成跨文档音讯传输。
window.frames 返回窗口中所框架或 <iframe>。frames.length能够检察有若干框架或 <iframe>，上面js1页面只要一个iframe标签所以frames.length=1，window.frames[0]挑选的就是给js2页面通报音讯。
音讯通报给js2页面后，吸收信息用window.addEventListener触发message事宜就可以够吸收js1吸收的信息，详细信息在e.data内里。

不过！
坑来了。
嵌入的页面不止一个iframe！页面里添加了360和QQ的插件，两个插件在页面里动态添加了N个iframe，造成了js争执，js2页面没有收到音讯。

比方：
js1.html页面：

<script>
window.onload=function(){
    window.frames[0].postMessage('This is data','*');
}
</script>
<div>
    <iframe id="child6" src="./js6.html"></iframe>
    <iframe id="child" src="./js2.html"></iframe>
    <iframe id="child5" src="./js5.html"></iframe>
    <iframe id="child4" src="./js4.html"></iframe>
 </div>

js2.html页面：

<script>
window.addEventListener("message", function(e){
     console.log(e);
 }, false);
</script>

以上，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页面：

<script>
window.onload=function(){
window.frames["child"].contentWindow.postMessage('This is data','*');//非IE内核
//window.frames["child"].postMessage('This is data','*');//IE内核
}
</script>
<div>
<iframe id="child6" src="./js6.html"></iframe>
<iframe id="child" src="./js2.html"></iframe>
<iframe id="child5" src="./js5.html"></iframe>
<iframe id="child4" src="./js4.html"></iframe>
</div>

js2.html页面：

<script>
window.addEventListener("message", function(e){
     console.log(e);
 }, false);
</script>
    原文作者：kingHalo丶一文
    原文地址: https://segmentfault.com/a/1190000013191135
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞