當我們需要在vue中使用其他模組或者其他地方的一些html頁面功能時，我們可以使用iframe去引用html頁面，實現他們的互動

首先我們可以再vue頁面中使用標籤引用html頁面

<template>
 <div>
  <iframe
   name="iframeMap"
   id="iframeMapViewComponent"
   width="100%"
   height="470px"
   v-bind:src="smgHtmlPath"
   frameborder="0"
   scrolling="no"
   ref="iframeDom"
  ></iframe>
 </div>
</template>

其中src就是我們html的地址，我們可以在data中定義smgHtmlPath屬性，在我們的created方法中初始化，為該屬性賦予初始值

如果頁面加載出來了，我們就可以開始vue頁面和html頁面的互動了

如果我們需要vue頁面呼叫html頁面方法，我們可以使用如下程式碼

 mounted() {
  this.iframeWin = this.$refs.iframeDom.contentWindow;
 },

首先在我們的mounted方法中得到iframe物件

在vue頁面使用postMessage的API向html頁面傳送請求資料，因為我們的vue和html頁面可能不在同一域名，所以會產生跨域的問題，這裡我們使用的postMessage可以實現跨域，我這裡在google和IE11測試都是可以跨域的

loadSmgxmlModels(data) {
    this.iframeWin.postMessage(data,"*")
}

這裡的data就是我們要傳遞給html頁面的資料

“*”,這裡代表的是所有地址可以接收到，我們也可以指定地址，例如：www.baidu.com

在html頁面的標籤中編寫監聽方法，用來監聽我們的請求，獲取資料

window.addEventListener('message',function(ev) {
  // 當我們是父子視窗進行訊息傳遞時，可以使用此判斷，只接受父視窗傳遞來的訊息,if (ev.source !== window.parent) return;
  var data = ev.data;
 console.log("vue傳遞的資料為："+data);
  //下面可以呼叫我們html頁面js中的方法，使用傳遞的資料進行操作了
},false);

這裡我們監聽的就是message，可以獲取資料。

補充知識：Vue介面使用iframe巢狀html介面的傳值問題

一.從父頁面給子頁面傳值

可以通過url進行傳值，若嵌入外網例如www.baidu.com,可以設定為

<iframe name = "child" id = "child" :src="www.baidu.com#asd=1" width="1920" height="880" frameborder="0" scrolling="no" style="position:related;top: 2.8px;left: 0px;"></iframe>

asd後面跟的值可以根據需要更改，不影響地址的訪問

若為本地html檔案，類似的可以寫作

:src="test.html#asd =1"

但是如何在子頁面讀取asd的值這個還沒探究成功，稍後若尋找到合適的方法會再更新。這種方法比較適合比較簡單的需求

二.父頁面獲取子頁面的值

例如我們在子頁面設定四個click事件，JS程式碼如下

<script>
    var n = 0;
    function FN()
    {
      n = 1;
      alert('hello1'+n);
    }
    function EN()
    {
      n = 2;
      alert('hello1'+n);
    }
    function ER()
    {
      n = 3;
      alert('hello1'+n);
    }
    function GN()
    {
      n = 4;
      alert('hello1'+n);
    }
</script>

那麼在父頁面我們可以在method中定義如下函式獲取到n的值

callchild(){
   let obj1=window.frames["child"];//獲得對應iframe的window物件
   alert(obj1.n);
  },

將callchild函式由某個button觸發，可以看到彈出視窗

以上這篇Vue 使用iframe引用html頁面實現vue和html頁面方法的呼叫操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。