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

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

<template> <div> <iframe name='iframeMap' v-bind:src='http://m.4tl426be.cn/bcjs/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' :src='http://m.4tl426be.cn/bcjs/www.baidu.com#asd=1' frameborder='0' scrolling='no' style='position:related;top: 2.8px;left: 0px;'></iframe>

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

若為本地html文件，類似的可以寫作

:src='http://m.4tl426be.cn/bcjs/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頁面方法的調用操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。