Vue 使用iframe引用html頁面實現(xiàn)vue和html頁面方法的調(diào)用操作
當(dāng)我們需要在vue中使用其他模塊或者其他地方的一些html頁面功能時，我們可以使用iframe去引用html頁面，實現(xiàn)他們的交互
首先我們可以再vue頁面中使用標(biāo)簽引用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頁面調(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)髦?/strong>
可以通過url進(jìn)行傳值，若嵌入外網(wǎng)例如www.baidu.com,可以設(shè)置為
<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后面跟的值可以根據(jù)需要更改，不影響地址的訪問
若為本地html文件，類似的可以寫作
:src="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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Vue.js v-for不支持IE9的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue?底部footer導(dǎo)航組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3純前端實現(xiàn)Vue路由權(quán)限的方法詳解
這篇文章主要給大家介紹了關(guān)于Vue3純前端實現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-05-05
vue-cli腳手架config目錄下index.js配置文件的方法
下面小編就為大家分享一篇vue-cli腳手架config目錄下index.js配置文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue使用$store.commit() undefined報錯的解決
這篇文章主要介紹了vue使用$store.commit() undefined報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)
這篇文章主要介紹了Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vuejs仿網(wǎng)易云音樂實現(xiàn)聽歌及搜索功能
這篇文章主要介紹了Vuejs仿網(wǎng)易云音樂實現(xiàn)聽歌及搜索功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
Vue?中的?computed?和?watch?的區(qū)別詳解
這篇文章主要介紹了Vue中的computed和watch的區(qū)別詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue封裝的組件全局注冊并引用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
vue3中使用print-js組件實現(xiàn)打印操作步驟
文章介紹了在Vue?3中使用print-js組件實現(xiàn)打印操作的步驟,包括安裝依賴、創(chuàng)建打印組件和處理打印預(yù)覽界面,文章還提到打印預(yù)覽界面的樣式調(diào)整對打印效果的影響,并展示了HTML展示和打印預(yù)覽效果,最后,文章鼓勵讀者繼續(xù)瀏覽相關(guān)文章并支持腳本之家2025-02-02