解决iframe使用postMessage传值addEventListener未接收到却收到webpackwarning的问题

最新推荐文章于 2024-09-24 18:48:48 发布

芝士焗红薯

最新推荐文章于 2024-09-24 18:48:48 发布

阅读量8.1k

点赞数 5

分类专栏： # vue 前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44320032/article/details/124196354

版权

项目中遇到iframe跨域通信使用postMessage时，addEventListener接收到的消息变为webpack warning。原因是iframe动态生成未加载完成及webpack自身postMessage。解决方案包括在iframe加载后发送postMessage，通过事件类型判断消息来源，并使用onload事件确保iframe加载完成。

摘要由CSDN通过智能技术生成

项目中使用到iframe，iframe跨域通信需要使用postMessage发送消息，addEventListener接收消息。

原先是获取当前窗口的数据发送过去。

const _iframe = document.getElementById('iframeViewer').contentWindow
          let _obj = res.data.data
          _obj.type = 'view'
          _obj.currentProcessInstanceId = row.id
          let Base64 = require('js-base64').Base64
          _obj.processXml = Base64.decode(res.data.data.processXml)
          _iframe.postMessage(JSON.stringify(_obj), '*')

后来项目需求更新，需要将本来的窗口多加几个菜单，可以进行页面切换。加了新的菜单之后就出现了问题，postMessage发送出了消息，控制台打印出来addEventListener接收到的消息变成了webpack相关。

bug如下：