使用iframe标签,postMessage方法实现两个页面之间的数据传输

vue项目

1.主动加载iframe标签,传递数据的页面

<template>
  <div class="frameclass">
    <iframe :src="url" ref="monitor" frameborder="0" @load="loadData"></iframe>
  </div>
</template>

export default {
  data() {
    return {
      url: "",
    };
  },
  mounted() {},
  methods: {
    loadData() {
      this.url = "http://localhost:8080/#/test1";
      let obj = {
        name: "tom",
        age: "18",
      };
      this.$refs.monitor.contentWindow.postMessage(
        {
          type: "ssa",
          obj: obj,
        },
        "*"
      );
      //第一个参数即传递的数据对象
    },
  },
};

2.接受数据的页面

export default {
  created() {
    window.addEventListener(
      "message",
      function (event) {
        console.log(event);
      },
      false
    );
  },
};

event里面可以打印监听到的事件,里面有你想要的所有数据