Vue 使用iframe引用html頁(yè)面實(shí)現(xiàn)vue和html頁(yè)面方法的調(diào)用操作
當(dāng)我們需要在vue中使用其他模塊或者其他地方的一些html頁(yè)面功能時(shí)，我們可以使用iframe去引用html頁(yè)面，實(shí)現(xiàn)他們的交互
首先我們可以再vue頁(yè)面中使用標(biāo)簽引用html頁(yè)面
<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方法中初始化，為該屬性賦予初始值
如果頁(yè)面加載出來(lái)了，我們就可以開(kāi)始vue頁(yè)面和html頁(yè)面的交互了
如果我們需要vue頁(yè)面調(diào)用html頁(yè)面方法，我們可以使用如下代碼
mounted() {
this.iframeWin = this.$refs.iframeDom.contentWindow;
},
首先在我們的mounted方法中得到iframe對(duì)象
在vue頁(yè)面使用postMessage的API向html頁(yè)面發(fā)送請(qǐng)求數(shù)據(jù)，因?yàn)槲覀兊膙ue和html頁(yè)面可能不在同一域名，所以會(huì)產(chǎn)生跨域的問(wèn)題，這里我們使用的postMessage可以實(shí)現(xiàn)跨域，我這里在google和IE11測(cè)試都是可以跨域的
loadSmgxmlModels(data) {
this.iframeWin.postMessage(data,"*")
}
這里的data就是我們要傳遞給html頁(yè)面的數(shù)據(jù)
“*”,這里代表的是所有地址可以接收到，我們也可以指定地址，例如：www.baidu.com
在html頁(yè)面的標(biāo)簽中編寫監(jiān)聽(tīng)方法，用來(lái)監(jiān)聽(tīng)我們的請(qǐng)求，獲取數(shù)據(jù)
window.addEventListener('message', function(ev) {
// 當(dāng)我們是父子窗口進(jìn)行消息傳遞時(shí)，可以使用此判斷，只接受父窗口傳遞來(lái)的消息,
if (ev.source !== window.parent) return;
var data = ev.data;
console.log("vue傳遞的數(shù)據(jù)為："+data);
//下面可以調(diào)用我們html頁(yè)面js中的方法，使用傳遞的數(shù)據(jù)進(jìn)行操作了
}, false);
這里我們監(jiān)聽(tīng)的就是message，可以獲取數(shù)據(jù)。
補(bǔ)充知識(shí)：Vue界面使用iframe嵌套html界面的傳值問(wèn)題
一.從父頁(yè)面給子頁(yè)面?zhèn)髦?/strong>
可以通過(guò)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ù)需要更改，不影響地址的訪問(wèn)
若為本地html文件，類似的可以寫作
:src="test.html#asd =1"
但是如何在子頁(yè)面讀取asd的值這個(gè)還沒(méi)探究成功，稍后若尋找到合適的方法會(huì)再更新。這種方法比較適合比較簡(jiǎn)單的需求
二.父頁(yè)面獲取子頁(yè)面的值
例如我們?cè)谧禹?yè)面設(shè)置四個(gè)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>
那么在父頁(yè)面我們可以在method中定義如下函數(shù)獲取到n的值
callchild(){
let obj1=window.frames["child"];//獲得對(duì)應(yīng)iframe的window對(duì)象
alert(obj1.n);
},
將callchild函數(shù)由某個(gè)button觸發(fā)，可以看到彈出窗口
以上這篇Vue 使用iframe引用html頁(yè)面實(shí)現(xiàn)vue和html頁(yè)面方法的調(diào)用操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Vue.js v-for不支持IE9的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了vue?底部footer導(dǎo)航組件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的方法詳解
這篇文章主要給大家介紹了關(guān)于Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-05-05
vue-cli腳手架config目錄下index.js配置文件的方法
下面小編就為大家分享一篇vue-cli腳手架config目錄下index.js配置文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue使用$store.commit() undefined報(bào)錯(cuò)的解決
這篇文章主要介紹了vue使用$store.commit() undefined報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說(shuō)明)
這篇文章主要介紹了Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說(shuō)明)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vuejs仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)聽(tīng)歌及搜索功能
這篇文章主要介紹了Vuejs仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)聽(tīng)歌及搜索功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
Vue?中的?computed?和?watch?的區(qū)別詳解
這篇文章主要介紹了Vue中的computed和watch的區(qū)別詳解，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue封裝的組件全局注冊(cè)并引用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
vue3中使用print-js組件實(shí)現(xiàn)打印操作步驟
文章介紹了在Vue?3中使用print-js組件實(shí)現(xiàn)打印操作的步驟,包括安裝依賴、創(chuàng)建打印組件和處理打印預(yù)覽界面,文章還提到打印預(yù)覽界面的樣式調(diào)整對(duì)打印效果的影響,并展示了HTML展示和打印預(yù)覽效果,最后,文章鼓勵(lì)讀者繼續(xù)瀏覽相關(guān)文章并支持腳本之家2025-02-02