postmessage的使用

我想大家会搜索postmessage这个应该都是存在两个项目耦合严重需要传递参数的吧，特别是在一个项目通过iframe引入另外的项目时，参数传递成了问题，更别说怎么解决B项目怎么触发A项目的事件了，接下来我就跟大家分享下，今天学习的内容postmessage

 需求是这样的：

A项目中通过iframe引用B项目的某个页面，在B页面我需要点击一个事件跳转对应的详情页面

那么怎么在B项目里面怎么把触发A项目的方法呢

在A项目中引用写以下：

<template>
  <div style="margin: -10px -15px;">
    <iframe
      class="iframe iframeBg iframeHeight" width="100%" frameborder="0" seamless
      v-for="(item, index) in visitedViews" :key="index"
      v-if="$util.isPublicPage(item.path)"
      :src="getSrc(item)" v-show="path === '/public' ? item.query.url === query.url : item.path === path"
      :data-id="index" :id="item.pathTIndex"></iframe>
  </div>
</template>

<script>
export default {
  mounted () {
    window.addEventListener('message', this.handleMessage)
  },
  methods: {
    handleMessage(event) {
      let that = this
      if (event && event.data) {
        that.$router.push({
          path: event.data.data.url,
          query: {
            ...event.data.data.query
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.iframeHeight {
  height: calc(100vh - 100px);
}
</style>

在B项目中写

mothod:{
    viewFun() {
      let url
      let query
      if (this.bandobjtype === 'serviceflow') {
        url = '/aiopsServiceFlow/serviceFlowDetails'
        query = {flowid: this.form.objid}
      } else {
        url = '/public/knowledge/detail'
        query = {id: this.form.objid}
      }
      let parentData = {type: 'passDataBack', data: {url, query}}
      window.parent.postMessage(parentData, '*')
    }
}

这样的话，A项目中就会一直监听着handleMessage事件的回调是否更新，更新了就去做你需要的事件