vue项目中postMessage的使用总结

postMessage简介

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件 (en-US)。传递给 window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。
详情链接：postMessage

项目搭建

创建两个vue项目
项目一：iframe-test-father；项目二：iframe-test-son

iframe-test-father 组件代码

<template>
  <div id="nav">
    <div>{{ childMsg }}</div>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <button @click="handleClickFatherToSon">父传子</button>
    <iframe
      ref="iframeRef"
      id="iframe"
      src="http://localhost:8080/#/"
      frameborder="0"
    ></iframe>
  </div>
  <router-view />
</template>

<script>
export default {
  data() {
    return {
      iframeWin: null,
      childMsg: "",
      count: 1,
    };
  },
  mounted() {
    // this.iframeWin = this.$refs.iframeRef.contentWindow;
    // this.iframeWin = document.getElementById("iframe").contentWindow;
    window.addEventListener("message", this.handleMessage);
  },
  methods: {
    handleMessage(event) {
      const data = event.data.data;
     if (data) {
        if (data.code == "success") {
          // alert(data.test);
          this.childMsg = data.test;
        }
      }
    },
    handleClickFatherToSon() {
      this.count += 1;
      document.getElementById("iframe").contentWindow.postMessage(
        {
          data: {
            code: "success",
            test: "我是父页面数据" + this.count,
          },
        },
        "*"
      );
      // this.iframeWin.postMessage(
      //   {
      //     data: {
      //       code: "success",
      //       test: "我是父页面数据" + this.count,
      //     },
      //   },
      //   "*"
      // );
    },
  },
};
</script>

iframe-test-son组件代码

<template>
  <div class="home">test1-home</div>
  <div>{{ fatherMsg }}</div>
  <button @click="handleClick">传递数据</button>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      fatherMsg: "",
    };
  },
  mounted() {
    window.addEventListener("message", this.handleClickMessage);
  },
  methods: {
    handleClick() {
      window.parent.postMessage(
        {
          data: {
            code: "success",
            test: "我是子页面数据",
          },
        },
        "*"
      );
    },
    handleClickMessage(event) {
      if (event.data.type != "webpackOk") {
        const data = event.data.data;
        if (data.code == "success") {
          this.fatherMsg = data.test;
        }
      }
    },
  },
};
</script>

效果图

遗留bug

bug ：Uncaught DOMException: Blocked a frame with origin “http://localhost:8082” from accessing a cross-origin frame.