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

首先我們可以再vue頁面中使用標(biāo)簽引用html頁面

<template> <div> <iframe name='iframeMap' v-bind:src='http://www.piao2010.com/bcjs/smgHtmlPath' frameborder='0' scrolling='no' ref='iframeDom' ></iframe> </div></template>

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

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

如果我們需要vue頁面調(diào)用html頁面方法，我們可以使用如下代碼

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

首先在我們的mounted方法中得到iframe對象

在vue頁面使用postMessage的API向html頁面發(fā)送請求數(shù)據(jù)，因為我們的vue和html頁面可能不在同一域名，所以會產(chǎn)生跨域的問題，這里我們使用的postMessage可以實現(xiàn)跨域，我這里在google和IE11測試都是可以跨域的

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

這里的data就是我們要傳遞給html頁面的數(shù)據(jù)

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

在html頁面的標(biāo)簽中編寫監(jiān)聽方法，用來監(jiān)聽我們的請求，獲取數(shù)據(jù)

window.addEventListener(’message’, function(ev) { // 當(dāng)我們是父子窗口進(jìn)行消息傳遞時，可以使用此判斷，只接受父窗口傳遞來的消息, if (ev.source !== window.parent) return; var data = ev.data; console.log('vue傳遞的數(shù)據(jù)為：'+data); //下面可以調(diào)用我們html頁面js中的方法，使用傳遞的數(shù)據(jù)進(jìn)行操作了}, false);

這里我們監(jiān)聽的就是message，可以獲取數(shù)據(jù)。

補(bǔ)充知識：Vue界面使用iframe嵌套html界面的傳值問題

一.從父頁面給子頁面?zhèn)髦?/b>

可以通過url進(jìn)行傳值，若嵌入外網(wǎng)例如www.baidu.com,可以設(shè)置為

<iframe name = 'child' :src='http://www.piao2010.com/bcjs/www.baidu.com#asd=1' frameborder='0' scrolling='no' style='position:related;top: 2.8px;left: 0px;'></iframe>

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

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

:src='http://www.piao2010.com/bcjs/test.html#asd =1'

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

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

例如我們在子頁面設(shè)置四個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中定義如下函數(shù)獲取到n的值

callchild(){ let obj1=window.frames['child'];//獲得對應(yīng)iframe的window對象 alert(obj1.n); },

將callchild函數(shù)由某個button觸發(fā)，可以看到彈出窗口

以上這篇Vue 使用iframe引用html頁面實現(xiàn)vue和html頁面方法的調(diào)用操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。