父级项目嵌套子级项目使用 postMessage 传值

使用postMessage传值

情景：在父项目使用 iframe标签 嵌套子项目时，通常在url上传token等参数，可使用window.postMessage()代替 url 传参

用法 ：

1. http://10.10.0.68:8083 是父项目 地址
2. http://localhost:8081 是子项目 地址

<!-- 父级项目嵌套子项目的页面 http://10.10.0.68:8083  -->
<template>
  <div class="home">
    <iframe
      @load="sendMessage"
      id="post2"
      src="http://localhost:8081/#/xxxxx"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
export default {
  data(){
    return {
      popup2:null,
      content:"传递的内容"
    }
  },
  created(){
   // window.addEventListener("message", this.receiveMessage, false);
  },
  mounted() {
     this.popup2 = document.getElementById("post2").contentWindow; //iframe标签加上 .contentWindow
  },
  methods: {
    sendMessage() {
      // this.popup1.postMessage("Test11" , "*"); "*"（表示无限制）
      this.popup2.postMessage(this.content , "http://localhost:8081"); //指定地址
    },
  },
};
</script>

<!-- 子项目页面 http://localhost:8081  -->
<template>
  <div class="home">
    <h1>{{text}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text:""
    };
  },
  created() {
    window.addEventListener("message", this.receiveMessage, false); //监听事件
  },
  mounted() {
    // window.addEventListener("message", this.receiveMessage, false);
  },
  methods: {
    receiveMessage(event) {
      console.log("8081 event", event);
      let origin = event.origin || event.originalEvent.origin;
      if (origin !== "http://10.10.0.68:8083") return; //过滤指定的 ip地址
      this.text = event.data
        
     // 可使用event.source.postMessage() 再传递消息回去
     // event.source.postMessage("传递的内容",event.origin);
    },

  },
};
</script>