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后面通過問號傳值，傳一個當前時間, 這個值并沒有其他用處，只是為了改變src的值。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0采用了虛擬DOM來代替對真實DOM的操作，最后通過某種機制來完成對真實DOM的更新，渲染視圖。這篇文章主要介紹了vue2.0的虛擬DOM渲染,需要的朋友可以參考下2018-08-08
Vue-DPlayer是一個易于使用、高性能的基于Vue.js的視頻播放器組件,本文給大家介紹Vue DPlayer詳細使用,本文將從四個方面對Vue-DPlayer進行詳細的闡述,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue.js購物車添加商品組件的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
今天小編就為大家分享一篇vuejs 動態(tài)添加input框的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue+element?ui表格添加多個搜索條件篩選功能(前端查詢)
這篇文章主要給大家介紹了關(guān)于vue+element?ui表格添加多個搜索條件篩選功能的相關(guān)資料,最近在使用element-ui的表格組件時,遇到了搜索框功能的實現(xiàn)問題,需要的朋友可以參考下2023-08-08
今天小編就為大家分享一篇element-ui 上傳圖片后清空圖片顯示的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了Vue的鍵盤事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
Vue全局監(jiān)測錯誤并生成錯誤日志實現(xiàn)方法介紹
在做完一個項目后，之后的維護尤為重要。這時，如果項目配置了錯誤日志記錄，這樣能大大減少維護難度。雖然不一定能捕獲到全部的錯誤，但是一般的錯誤還是可以監(jiān)測到的。這樣就不用測試人員去一遍一遍復(fù)現(xiàn)bug了2022-10-10
vue el-table實現(xiàn)多選框回填的示例代碼
摘要：Vue多選框回填是實現(xiàn)表單數(shù)據(jù)高效處理的常見需求,本文主要介紹了vue el-table實現(xiàn)多選框回填的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-01-01
Vue項目從webpack3.x升級webpack4不完全指南
前段時間，泡面將自己的一個Vue-cli構(gòu)建的前端框架從webpack3.x升級到了4.x版本，現(xiàn)在才拉出來記錄一下，已備忘之用，也和大家分享一下,需要的朋友可以參考下2019-04-04