VUE3引入html文件并傳值方法舉例
1、把html頁(yè)面放到指定目錄中(我是放在public中的)
2，使用iframe標(biāo)簽把html頁(yè)面引入到頁(yè)面中
<template>
<div class="if_box">
<iframe src="../../public/first.html" width="100%" height="100%" ref="fIframe">
</iframe>
</div>
</template>3，通過(guò)ref獲取iframe元素并且通過(guò)contentWindow自定義函數(shù)給html頁(yè)面?zhèn)髦?/strong>
<script lang="ts">
import { ref, nextTick, onMounted } from 'vue'
export default {
components: {},
setup() {
const fIframe = ref<any>();
let total = [1, 2, 3, 4];
const sendData = (data) => {
fIframe.value.onload = function () {
fIframe.value.contentWindow.postMessage(total, 'http://127.0.0.1:5173')
//第一個(gè)參數(shù)是你要傳的數(shù)據(jù)，第二個(gè)這是你是項(xiàng)目地址
}
}
onMounted(() => {
sendData(total)
})
return {
fIframe,
sendData
}
},
}
</script>注意：我是進(jìn)入頁(yè)面?zhèn)髦盗耍砸欢ㄒ逊椒ǚ旁趏nMounted里面，因?yàn)閐om是異步更新的，如果直接放在外面是獲取不到的，同時(shí)還要用onload監(jiān)聽(tīng)組件是否加載完畢。
4、在html文件中監(jiān)聽(tīng)message事件獲取傳值
<script>
window.addEventListener('message', (e) => {
console.log("拿到數(shù)據(jù)", e.data);
});
</script>最后在獲取的效果
除此之外傳值還有一個(gè)方法
第二個(gè)方法：
綁定組件這些操作都是一樣的，第二個(gè)方法不同的地方在他是通過(guò)html頁(yè)面中定義的函數(shù)傳值的，直接看操作
1、先在html頁(yè)面中定義一個(gè)函數(shù)
<script>
function receiveData(data) {
console.log('獲取到數(shù)據(jù)', data)
}
</script>2、然后在vue頁(yè)面中通過(guò)contentWindow調(diào)用這個(gè)函數(shù)，同樣的我們也要監(jiān)聽(tīng)html頁(yè)面是否加載完，否則會(huì)報(bào)錯(cuò)
<script lang="ts">
import { ref, nextTick, onMounted } from 'vue'
export default {
components: {},
setup() {
const fIframe = ref<any>();
let total = [1, 2, 3, 4];
const sendData = (data) => {
fIframe.value.onload = function () {
fIframe.value.contentWindow.receiveData(data);
}
}
onMounted(() => {
sendData(total)
})
return {
fIframe,
sendData
}
},
}
</script>最后上完整代碼
VUE
<template>
<div class="if_box">
<iframe src="/first.html" width="100%" height="100%" ref="fIframe"></iframe>
</div>
</template>
<script lang="ts">
import { ref, nextTick, onMounted } from 'vue'
export default {
components: {},
setup() {
const fIframe = ref<any>();
let total = [1, 2, 3, 4];
const sendData = (data) => {
fIframe.value.onload = function () {
//方法一
// fIframe.value.contentWindow.postMessage(total, 'http://127.0.0.1:5173')
//方法二
fIframe.value.contentWindow.receiveData(data);
}
}
onMounted(() => {
sendData(total)
})
return {
fIframe,
sendData
}
},
}
</script>HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
iframe頁(yè)面插入
</div>
</body>
<script>
// 方法一
window.onload = () => {
// 子頁(yè)面接收消息
window.addEventListener('message', function (e) {
console.log("拿到數(shù)據(jù)", e.data);
if (e.data) {
this.getdate = e.data
}
}, false)
}
// 方法二
function receiveData(data) {
console.log('獲取到數(shù)據(jù)', data)
}
</script>
</html>總結(jié)
到此這篇關(guān)于VUE3引入html文件并傳值的文章就介紹到這了,更多相關(guān)VUE3引入html文件傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js 中 axios 跨域訪問(wèn)錯(cuò)誤問(wèn)題及解決方法
這篇文章主要介紹了Vue.js 中 axios 跨域訪問(wèn)錯(cuò)誤問(wèn)題及解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue請(qǐng)求數(shù)據(jù)的三種方式,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放詳細(xì)圖文教程
m3u8是一種常用的視頻流媒體格式,通常用于在Web上播放視頻,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vuex 作為一個(gè)老牌 Vue 狀態(tài)管理庫(kù)，大家都很熟悉了，Pinia 是 Vue.js 團(tuán)隊(duì)成員專(zhuān)門(mén)為 Vue 開(kāi)發(fā)的一個(gè)全新的狀態(tài)管理庫(kù)，本文就來(lái)講講它的具體使用吧2023-04-04
TypeError:res.forEach?is?not?a?function報(bào)錯(cuò)解決辦法
這篇文章主要給大家介紹了關(guān)于TypeError:res.forEach?is?not?a?function報(bào)錯(cuò)的解決辦法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
Vue 配合eiement動(dòng)態(tài)路由,權(quán)限驗(yàn)證的方法
今天小編就為大家分享一篇Vue 配合eiement動(dòng)態(tài)路由,權(quán)限驗(yàn)證的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
provide/inject 適用于跨級(jí)通信，在孫組件中通過(guò)依賴(lài)注入的方式能獲取到父組件中改變的這個(gè)值，下面通過(guò)實(shí)例代碼介紹vue3-組合式api-provide/inject的相關(guān)知識(shí),需要的朋友可以參考下2022-11-11
用VueJS寫(xiě)一個(gè)Chrome瀏覽器插件的實(shí)現(xiàn)方法
這篇文章主要介紹了用VueJS寫(xiě)一個(gè)Chrome瀏覽器插件的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
Vue.js組件tree實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tree實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法
最近工作中遇到vue3中使用defineProps中報(bào)錯(cuò),飄紅,所以這篇文章主要給大家介紹了關(guān)于Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法,需要的朋友可以參考下2023-01-01