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