Vue嵌入iframe，两个工程间的通信

前言

开发中可能会碰到这种情况：当前工程需要嵌入另一个工程的页面，此时两个工程间的通信可能就会碰到js跨域的问题。这里记录一下我的解决方法。

关键

1. 使用postMessage发送消息
2. 使用addEventListener监听发送过来的消息

实现

父页面代码：

<template>
  <div>
    <div class="box">
      <span>当前页接收的iframe信息：</span>
      <span style="color:red;">{{receive}}</span>
    </div>
    <div class="box">
      <el-input placeholder="输入内容向iframe发送" v-model="msg.content" style="width:180px;"></el-input>
      <el-button @click="Send">发送</el-button>
    </div>
    <div style="height:500px">
      <iframe
        :src="url"
        ref="iframe"
        style="height: 100%;width:100%; frameborder=no"
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
      ></iframe>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    window.addEventListener("message", event => {
      this.receive = event.data.content;
    });
  },
  data() {
    return {
      url: "http://192.168.1.194:8080/child",
      receive: "",
      msg: { content: "" }
    };
  },
  methods: {
    Send() {
      this.$refs.iframe.contentWindow.postMessage(this.msg, "*");
    }
  }
};
</script>

iframe页面代码:

<template>
  <div>
    <div class="box">
      <span>iframe接收的信息:</span>
      <span style="color:red;">{{receive}}</span>
    </div>
    <div class="box">
      <el-input placeholder="输入内容向父页面发送" v-model="msg.content" style="width:180px;"></el-input>
      <el-button @click="Send">发送</el-button>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    window.addEventListener("message", event => {
      debugger;
      this.receive = event.data.content;
    });
  },
  data() {
    return {
      receive: "",
      msg: { content: "" }
    };
  },
  methods: {
    Send() {
      window.parent.postMessage(this.msg, "*");
    }
  }
};
</script>

页面效果：

如果addEventListener多次被调用，可以试试下面这种方法

window.onmessage = function (event) {}