iframe页面通信

现在我们有两个项目一个是项目A ip地址为http://localhost:3000 一个是项目B ip地址为http://localhost:9527
项目A中需要用到项目B的页面和功能的话这时候可以考虑使用iframe嵌入页面
但是这时候我们就需要页面中的通信了。
这次我们模拟一下先由A向b发送数据然后b在某个时间给a发送一条数据然后在a接收到数据后再给b发送一条数据

A项目

A项目给B项目传参数方式

1. 可以直接写在query参数这样在B项目可以通过query参数获取
2. 通过iframe.contentWindow.postMessage推送数据第一个参数为要推送的数据，第二个参数可以设置将消息发送给什么域名可以设置为*代表任何域名。B页面通过监听message来获取消息

B项目给A项目传参数方式

1. 通过window.postMessage推送数据第一个参数为要推送的数据，第二个参数可以设置将消息发送给什么域名可以设置为*代表任何域名。A页面通过监听message来获取消息

<template>
  <a-button @click="sendMessage">点我</a-button>
  <iframe style="width: 100vw; height: 100vh" id="iframe" frameborder="0" ref="iframe" :src="src"></iframe>
</template>

<script>
export default {
  name: 'pdf',
  data() {
    return {};
  },
  computed: {
    src() {
      return `http://localhost:9527/workspace/pdf?token=1234567`;
    },
  },
  methods: {
    sendMessage() {
      const iframe = document.querySelector('#iframe');
      // 第二个参数可以设置将消息发送给什么域名可以设置为*代表任何域名
      iframe.contentWindow.postMessage({ message: 'A给B发送的消息' }, 'http://localhost:9527');
    },
    messageHandle(event) {
      // 先判断发送消息的域名是不是自己要接收的域名不是的话就退出
      if (event.origin !== 'http://localhost:9527') return;
      if (event.data) {
        console.log(event.data);
        // 这里的event.data就是{
        //     "data": "B给A发送数据"
        // }
      }
    },
  },
  created() {
    // 传递消息使用query参数
    // 获取iframe传递的消息
    //生成pdf成功就会发送消息过来
    //如果在外部全局监听了message事件就不用解绑  removeEventListener
    window.addEventListener('message', this.messageHandle);
  },
};
</script>

B项目

<template>
  <div class="box">B项目</div>
</template>

<script>
export default {
  name: 'Index',
  components: {},
  data() {
    return {}
  },

  async mounted() {
    // 这里就是A应用带过来的query参数，也可以本应用携带query参数{
    //     "token": "1234567"
    // }
    window.addEventListener('message', function (e) {
      if (e.origin !== 'http://localhost:3000') return
      // 这里就是A通过post带过来的数据{
      //     "message": "A给B发送的消息"
      // }
      console.log(e.data)
    })
    console.log(this.$route.query)
    if (window.parent)
      window.parent.postMessage(
        {
          data: 'B给A发送数据'
        },
        'http://localhost:3000'
      )
  },
  methods: {}
}
</script>