vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問題及解決
更新時(shí)間：2022年12月09日 14:43:37 作者：風(fēng)如也
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue內(nèi)嵌iframe的src更新頁(yè)面未刷新
vue中，系統(tǒng)使用iframe內(nèi)嵌了其他系統(tǒng)的頁(yè)面，iframe的src修改了，但是iframe內(nèi)部頁(yè)面內(nèi)容未更新，也未請(qǐng)求接口。
原因
iframe的src中如果帶hash #，src改變是不會(huì)刷新的。
解決
方式一：可以在 # 號(hào)前加一個(gè)隨機(jī)數(shù)或者時(shí)間戳，但這種方式會(huì)改變url；方式二：在組件上加key，強(qiáng)制刷新頁(yè)面。
方式一：
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ā)生改變,才會(huì)刷新iframe里面的內(nèi)容.
<iframe :src="baseUrl" height="100%" frameborder="0" scrolling="auto" width="100%"></iframe>
this.baseUrl = this.baseUrl + ?`&time=${new Date().getTime()`給url后面通過問號(hào)傳值，傳一個(gè)當(dāng)前時(shí)間, 這個(gè)值并沒有其他用處，只是為了改變src的值。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0采用了虛擬DOM來代替對(duì)真實(shí)DOM的操作，最后通過某種機(jī)制來完成對(duì)真實(shí)DOM的更新，渲染視圖。這篇文章主要介紹了vue2.0的虛擬DOM渲染,需要的朋友可以參考下2018-08-08
Vue-DPlayer是一個(gè)易于使用、高性能的基于Vue.js的視頻播放器組件,本文給大家介紹Vue DPlayer詳細(xì)使用,本文將從四個(gè)方面對(duì)Vue-DPlayer進(jìn)行詳細(xì)的闡述,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue.js購(gòu)物車添加商品組件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
vuejs 動(dòng)態(tài)添加input框的實(shí)例講解
今天小編就為大家分享一篇vuejs 動(dòng)態(tài)添加input框的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue+element?ui表格添加多個(gè)搜索條件篩選功能(前端查詢)
這篇文章主要給大家介紹了關(guān)于vue+element?ui表格添加多個(gè)搜索條件篩選功能的相關(guān)資料,最近在使用element-ui的表格組件時(shí),遇到了搜索框功能的實(shí)現(xiàn)問題,需要的朋友可以參考下2023-08-08
element-ui 上傳圖片后清空?qǐng)D片顯示的實(shí)例
今天小編就為大家分享一篇element-ui 上傳圖片后清空?qǐng)D片顯示的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了Vue的鍵盤事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
Vue全局監(jiān)測(cè)錯(cuò)誤并生成錯(cuò)誤日志實(shí)現(xiàn)方法介紹
在做完一個(gè)項(xiàng)目后，之后的維護(hù)尤為重要。這時(shí)，如果項(xiàng)目配置了錯(cuò)誤日志記錄，這樣能大大減少維護(hù)難度。雖然不一定能捕獲到全部的錯(cuò)誤，但是一般的錯(cuò)誤還是可以監(jiān)測(cè)到的。這樣就不用測(cè)試人員去一遍一遍復(fù)現(xiàn)bug了2022-10-10
vue el-table實(shí)現(xiàn)多選框回填的示例代碼
摘要：Vue多選框回填是實(shí)現(xiàn)表單數(shù)據(jù)高效處理的常見需求,本文主要介紹了vue el-table實(shí)現(xiàn)多選框回填的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
Vue項(xiàng)目從webpack3.x升級(jí)webpack4不完全指南
前段時(shí)間，泡面將自己的一個(gè)Vue-cli構(gòu)建的前端框架從webpack3.x升級(jí)到了4.x版本，現(xiàn)在才拉出來記錄一下，已備忘之用，也和大家分享一下,需要的朋友可以參考下2019-04-04