JS 互相調用iframe頁面中js方法、VUE里 iframe 互調方法

1，父 html 調用子 iframe 內方法： 

document.getElementById("iframe").contentWindow.func(data1,data2...);

 

2，子 Iframe 中 調用 父html中方法：

parent.func(data1,data2...)

 

在VUE中：

// 父vue文件調用 iframe html文件中方法：
this.$refs.iframe.contentWindow.func(data1,data2...);

// 在 iframe 的 html文件中，調父 vue 中方法: （這里有點麻煩，.html 非vue組件，得借用js的全局變量做橋梁來實現）
 data(){
  return: {

     randomObj: {

      edit: 'edit_' + new Date().getTime()   // 先定義隨機ID

     }

    }

  },

 created() {
     let _this = this;
     //這里可放到全局，提供給子 iframe 調用

window[this.randomObj.edit] = (_this) => {

this.module_edit(_this) //VUE 中方法

}

  },

// iframe.html 調用 vue 中方法

  var fatherId = null

  把 randomObj 傳過來，再使用即可

  window.parent[fatherId.edit](_this)

//如果簡單粗暴點，直接load 最方便：
<iframe ref="iframe" src="/static/index.html" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="100%" height="100%" @load="vueFunc"></iframe>
...
methods:{
　　vueFunc(){}
}

 

iframe 上自適應高

<iframe ref="iframe" src="/static/index.html" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="100%" height="100%" @load="vueFunc"></iframe> 
...

methods:{

    vueFunc() {
      try {
        setTimeout(function() {

          let autoHeight = _this.$refs.iframe.contentWindow.document.documentElement.scrollHeight;
          _this.$refs.iframe.style.height = autoHeight + "px";

        }, 20);
      } catch (err) {
        　　console.log("vueFunc ");
      }
    },
}

 

 

 

.