当前位置: 代码迷 >> 综合 >> window.postMessage 与 Vue 一起使用注意的问题
  详细解决方案

window.postMessage 与 Vue 一起使用注意的问题

热度:20   发布时间:2024-01-27 05:15:22.0

场景:
vue一个组件中嵌套了IFrame ,这时,为了vue与iframe交互事件,选择使用window.postMessage的方法进行交互;
交互方式有点类似于websocket,是双方建立起一个通道;
问题:
当我的项目中有两个模块同时调用了这个组件,且在同一时间都属于打开状态,那么这个通道在iframe的角度看就变成了 一对多,也就是一个模块出发的事件。由iframe发出一个信息后,这个组件会执行两次;

需求:
只想让组件在当前显示的界面执行;

解决:
不同的模块给组件传一个标识符,并将标识符带入到iframe,当iframe传回数据室,带回这个标识进行判断,如果该标识=当前模块给的标识 则执行;

  相关解决方案