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中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決
這篇文章主要介紹了vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決方案，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue將對(duì)象新增的屬性添加到檢測(cè)序列的方法
下面小編就為大家分享一篇vue將對(duì)象新增的屬性添加到檢測(cè)序列的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue.js設(shè)計(jì)與實(shí)現(xiàn)分支切換與清除學(xué)習(xí)總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計(jì)與實(shí)現(xiàn)分支切換與清除學(xué)習(xí)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章介紹了Vue路由vue-router的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
Vue?Mock.js介紹和使用與首頁(yè)導(dǎo)航欄左側(cè)菜單搭建過(guò)程
Mock.js是一個(gè)模擬數(shù)據(jù)的生成器，用來(lái)幫助前端調(diào)試開(kāi)發(fā)、進(jìn)行前后端的原型分離以及用來(lái)提高自動(dòng)化測(cè)試效率，這篇文章主要介紹了Vue?Mock.js介紹和使用與首頁(yè)導(dǎo)航欄左側(cè)菜單搭建,需要的朋友可以參考下2023-09-09
process.env?是?Node.js?中的一個(gè)環(huán)境對(duì)象，其中保存著系統(tǒng)的環(huán)境的變量信息，可使用?Node.js?命令行工具直接進(jìn)行查看，這篇文章主要介紹了Vue中配置process.env詳解,需要的朋友可以參考下2023-03-03
Element實(shí)現(xiàn)表格分頁(yè)數(shù)據(jù)選擇+全選所有完善批量操作
這篇文章主要介紹了Element實(shí)現(xiàn)表格分頁(yè)數(shù)據(jù)選擇+全選所有完善批量操作，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
創(chuàng)建vue項(xiàng)目沒(méi)有router、view的解決辦法
在學(xué)習(xí)vue的時(shí)候遇到很多問(wèn)題,這里做一些總結(jié),下面這篇文章主要給大家介紹了關(guān)于創(chuàng)建vue項(xiàng)目沒(méi)有router、view文件夾的解決辦法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue提倡的是在方法中只有對(duì)數(shù)據(jù)的處理，所以提供了事件修飾符用于DOM的事件處理，下面這篇文章主要給大家介紹了關(guān)于Vue自定義組件使用事件修飾符的相關(guān)資料,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了vue5中的事件修飾符(style)和template，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04