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

Posted on by

vue組件和iframe頁面相互傳參

目前網上大多關於iframe父子傳參的博客都是在敘述父頁面是html文件，子iframe文件也是html文件，涉及到父頁面是vue組件子iframe頁面是html的博客多數講的不是很明白；

而最近我在項目中碰到瞭這種需求：在vue組件中嵌入iframe頁面，並實現父子傳參；

vue組件調用iframe頁面方法和參數

下面是在 vue組件中（父組件） 一個通過點擊按鈕觸發的方法：

 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裡的變量
    },

子組件 iframe頁面 中有一個被調用的方法及變量：

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

點擊按鈕的結果是：

iframe頁面向vue組件傳參

在vue組件中有一個供iframe頁面調用的方法：

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

iframe調用vue組件方法的代碼：

  function Obj(res){
  // Obj通過按鈕點擊觸發
    console.log(parent)
        // 調用vue組件方法
      parent.getFromIframe("我叫iframe")
      // 向vue組件發送參數 && 改變vue組件的參數
      parent.isChangeMe = "你已經被我iframe改變瞭"
  }

但是 ！！！！！！！！！！！！！！！

隻這麼做是不夠的，會報錯，如下：

個人猜想： 問題的原因是 iframe的parent並不是vue實例！

目前隻找到瞭一個辦法來解決這個問題：

就是在created鉤子裡加上這兩句，

  created() {
    window.getFromIframe = this.getFromIframe; //把vue實例中的方法引用給window對象
  },

在調用的vue實例的方法中 加上對vue內變量的改變

    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}`);
    }

最終的運行結果是：

bingo！！！！！ 問題暫時得到瞭解決。

小結一下：vue組件 和 iframe 的嵌入麻煩多多，且目前還沒還沒找到正統的方法；此外，還有很多坑我還沒踩到，如果後續這方面有什麼問題 以及 其他的解決方案，我會繼續更新到這上面來的！

內嵌iframe頁面並進行傳值

需求是把兩個單獨的系統在一個總的系統作為菜單進行免密登錄，由於時間還有跨域和不同的token等問題，就使用瞭內嵌iframe，因為是不同的域名進入子系統也要本地存儲一下（獲取的user信息以及token傳入到iframe子系統）

<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])

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：