vue元件和iframe頁面的相互傳參問題及解決

 sentToIframe() {
      let childFrameObj = document.getElementById("unityiframe");
      console.log("childFrameObj", childFrameObj);
      // childFrameObj.contentWindow.getMessageFromParent(this.tData); //第一種向子iFrame傳參方式，呼叫iframe的methods達到傳參的目的
      this.$refs.unity.contentWindow.getMessageFromParent(this.tData); // 這樣也是可以呼叫子iframe的方法
      // childFrameObj.contentWindow.frameData = "這是vue元件給你的引數！" // 傳參成功
      this.$refs.unity.contentWindow.frameData =
        "這是vue元件給你的第二個引數！"; //傳參成功
      console.log("傳送完成");
      //此外，還可以通過DOM操作，操作子iframe的DOM
      var t = document
        .getElementById("unityiframe")
        .contentWindow.document.getElementById("dd");
      console.log(t);
      //
      console.log("frameData？", unityiframe.window.frameData); //利用id可以呼叫到iframe裡的變數
      // console.log("frameData？",this.$refs.unity.window.frameData) //利用ref呼叫不到iframe裡的變數
    },

  var frameData = "別喊我！" //此變數用於測試 vue元件是否能呼叫此變數
  function getMessageFromParent(value){
    // 接受從vue元件中傳過來的引數
    console.log(`我接收到parent傳過來的引數了：${value}`)
  }

    getFromIframe(value) {
      console.log(`我是iframe傳過來的引數：${value}`);
      console.log("我被iframe呼叫了！");
      console.log(this.vueData);
      console.log(`改變前是：你是否能夠改變我；改變後是：${this.isChangeMe}`);
    }

  function Obj(res){
  // Obj通過按鈕點選觸發
    console.log(parent)
        // 呼叫vue元件方法
      parent.getFromIframe("我叫iframe")
      // 向vue元件傳送引數 && 改變vue元件的引數
      parent.isChangeMe = "你已經被我iframe改變了"
  }

  created() {
    window.getFromIframe = this.getFromIframe; //把vue範例中的方法參照給window物件
  },

    getFromIframe(value) {
      console.log(`我是iframe傳過來的引數：${value}`);
      console.log("我被iframe呼叫了！");
      console.log(this.vueData);
      this.isChangeMe = window.isChangeMe;// 把window變數 賦值給 vue 範例變數；使得在iframe中能夠改變vue範例中變數
      console.log(`改變前是：你是否能夠改變我；改變後是：${this.isChangeMe}`);
    }

<template>
  <div class="hello">
    <div>
      <iframe src="http://xxxxxxxxxxxxxx" frameborder="0"  id="myIframe" ref="myIframe"></iframe>
    </div>
  </div>
</template>

export default {
  mounted() {
    this.iframeWin = this.$refs.myIframe.contentWindow;
    //最開始做的是點選事件是沒有問題的  後面需要自動傳值就不行  也試了模擬點選還是不行
    //原因是iframe還沒載入完  所以使用onload
    document.getElementById("myIframe").onload=function(){
      this.fatherpost()
    };
  }
  methods：{
    fatherpost(e){//iframe傳值
         this.iframeWin.postMessage({
             params:{
               data:data//傳的資料
             }
         },'http://xxxxxxxxxxxxxx')
    },
  }
}
//iframe接收
export default {
  mounted() {
     window.addEventListener('message',function(e){
       console.log(e.data)
     },false)
  }
}
//子傳父的話   掛載和接收的方式都是差不多
window.parent.postMessage(message, targetOrigin, [transfer])