vue项目如何使用postmessage通信?

Twisted
  • 371

因需要要将多个vue项目整合到一个项目,所以首先想到了iframe嵌入的方式,但是在使用postmessage的时候遇到一些问题,在接受信息的时候会执行两次,一次有值一次没值:

// 父组件

<template>
  <iframe id='monitor' @load="postMsg" ref="monitor" width="100%" height="100%" src="http://localhost:2000" frameborder="0"></iframe>
</template>

<script>
export default {
  methods: {
    postMsg() {
      this.$refs.monitor.contentWindow.postMessage({name: '我是'}, '*')
    }
  }
}
</script>


// 子组件 (app.vue)
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'APP',
  methods: {
    receiveMsg(event) {
      console.log('msg', event)
    }
  },
  mounted() {
    window.addEventListener('message', this.receiveMsg, false)
  }
}
</script>

子组件中的打印值如下:

clipboard.png

执行了两次,有点疑惑,是传值的时机有问题还是接受的时机有问题呢?

回复
阅读 10.6k
3 个回答

第二个显然不是你发的,postmessage可以传入域参数来判断是不是自己发的数据,你不做检测,如果你引入的js也postmessage呢?

不太明白,为何会想到iframe来嵌套,配置多入口应该也是可以的吧

第二个打印的是webpack的事件
在做postmessage通信的时候一定不要把内容放在data一层
写个type判断是不是自己发起的通信 再执行逻辑

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏