快捷導(dǎo)航

vue之組件和iframe頁面的相互傳參問題

更新時間：2025年06月12日 09:08:56 作者：阿飛920

這篇文章主要介紹了vue之組件和iframe頁面的相互傳參問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

目前網(wǎng)上大多關(guān)于iframe父子傳參的博客都是在敘述父頁面是html文件，子iframe文件也是html文件，涉及到父頁面是vue組件子iframe頁面是html的博客多數(shù)講的不是很明白；而最近我在項目中碰到了這種需求：在vue組件中嵌入iframe頁面，并實現(xiàn)父子傳參；

1.vue組件調(diào)用iframe頁面方法和參數(shù)

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

 sentToIframe() {
      let childFrameObj = document.getElementById("unityiframe");
      console.log("childFrameObj", childFrameObj);
      // childFrameObj.contentWindow.getMessageFromParent(this.tData); //第一種向子iFrame傳參方式，調(diào)用iframe的methods達(dá)到傳參的目的
      this.$refs.unity.contentWindow.getMessageFromParent(this.tData); // 這樣也是可以調(diào)用子iframe的方法
      // childFrameObj.contentWindow.frameData = "這是vue組件給你的參數(shù)！" // 傳參成功
      this.$refs.unity.contentWindow.frameData =
        "這是vue組件給你的第二個參數(shù)！"; //傳參成功
      console.log("發(fā)送完成");

      //此外，還可以通過DOM操作，操作子iframe的DOM
      var t = document
        .getElementById("unityiframe")
        .contentWindow.document.getElementById("dd");
      console.log(t);
      //
      console.log("frameData？", unityiframe.window.frameData); //利用id可以調(diào)用到iframe里的變量
      // console.log("frameData？",this.$refs.unity.window.frameData) //利用ref調(diào)用不到iframe里的變量
    },

(1-2)子組件 iframe頁面中有一個被調(diào)用的方法及變量：

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

點擊按鈕的結(jié)果是：

2.iframe頁面向vue組件傳參

(2-1)在vue組件中有一個供iframe頁面調(diào)用的方法：

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

(2-2)iframe調(diào)用vue組件方法的代碼

  function Obj(res){
  // Obj通過按鈕點擊觸發(fā)
    console.log(parent)
        // 調(diào)用vue組件方法
      parent.getFromIframe("我叫iframe")
      // 向vue組件發(fā)送參數(shù) && 改變vue組件的參數(shù)
      parent.isChangeMe = "你已經(jīng)被我iframe改變了"
  }

但是 ?。。。。。。。。。。。。。。?/p>

只這么做是不夠的，會報錯，如下：

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

目前只找到了一個辦法來解決這個問題：

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

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

在調(diào)用的vue實例的方法中加上對vue內(nèi)變量的改變

getFromIframe(value) {
      console.log(`我是iframe傳過來的參數(shù)：${value}`);
      console.log("我被iframe調(diào)用了！");
      console.log(this.vueData);
      this.isChangeMe = window.isChangeMe;// 把window變量 賦值給 vue 實例變量；使得在iframe中能夠改變vue實例中變量
      console.log(`改變前是：你是否能夠改變我；改變后是：${this.isChangeMe}`);
    }

最終的運(yùn)行結(jié)果是：