vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決
更新時間：2022年12月09日 14:43:37 作者：風(fēng)如也
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue內(nèi)嵌iframe的src更新頁面未刷新
vue中，系統(tǒng)使用iframe內(nèi)嵌了其他系統(tǒng)的頁面，iframe的src修改了，但是iframe內(nèi)部頁面內(nèi)容未更新，也未請求接口。
原因
iframe的src中如果帶hash #，src改變是不會刷新的。
解決
方式一：可以在 # 號前加一個隨機數(shù)或者時間戳，但這種方式會改變url；方式二：在組件上加key，強制刷新頁面。
方式一：
this.url= `https://xxxx/xxxxx${new Date().getTime()}/#/${val.params.url}`方式二：
<template>
<div>
<iframe
:key="key"
:src="url"
width="100%"
height="100%"
frameborder="0"
></iframe>
</div>
</template>
<script>
export default {
data() {
return {
url: "",
key: new Date().getTime()
}
},
watch: {
$route: {
handler(val) {
this.key = new Date().getTime()
this.url= `https://xxx/xxx/#/${val.params.url}`
},
immediate: true,
},
},
}
</script>iframe的src指向的內(nèi)容不刷新的解決方法之一
iframe的src的值發(fā)生改變,才會刷新iframe里面的內(nèi)容.
<iframe :src="baseUrl" height="100%" frameborder="0" scrolling="auto" width="100%"></iframe>
this.baseUrl = this.baseUrl + ?`&time=${new Date().getTime()`給url后面通過問號傳值，傳一個當(dāng)前時間, 這個值并沒有其他用處，只是為了改變src的值。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)側(cè)邊定位欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
解決el-upload批量上傳只執(zhí)行一次成功回調(diào)on-success的問題
這篇文章主要介紹了解決el-upload批量上傳只執(zhí)行一次成功回調(diào)on-success的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue v-for循環(huán)出來的數(shù)據(jù)動態(tài)綁定值問題
這篇文章主要介紹了vue v-for循環(huán)出來的數(shù)據(jù)動態(tài)綁定值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家介紹了vue實現(xiàn)無縫滾動手摸手教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了詳解如何搭建mpvue框架搭配vant組件庫的小程序項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家分享了一款MVVM組件，構(gòu)建自己的Vue組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了Vue.js中$refs{}如何獲取DOM元素問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了mpvue項目中使用第三方UI組件庫的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇vue 父組件通過$refs獲取子組件的值和方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了關(guān)于Vue Webpack2單元測試的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08