Vue iframe更改src后頁面未刷新問題解決方法
一、場景描述
在項目開發(fā)過程中，應用iframe實現(xiàn)外系統(tǒng)頁面嵌套的時候，發(fā)現(xiàn)引入其他頁面后，頁面內(nèi)容并未刷新加載，經(jīng)過一番研究，解決方案如下：
vm.iframeSrc = iframeSRC
if (document.getElementById('iframe')) {
setTimeout(() => {
document.getElementById(iframeid).contentWindow.location.reload(true);
}, 200)
}注：務必在更改iframe src屬性值之后補充頁面重載邏輯，否則無法解決問題。
注：window.reload是重新加載當前需要的所有內(nèi)容，也就包括頁面和后臺的代碼，此過程中實際上是從后臺重新進行操作；
二、高版本瀏覽器頁簽切換后內(nèi)容不刷新問題解決
在應用上面的解決措施后，發(fā)現(xiàn)Chrome(>75)及IE高版本瀏覽器下，iframe在更改了src之后對應的網(wǎng)頁并未刷新問題復現(xiàn)。
2.1 解決思路
iframe下頁面內(nèi)容未刷新問題其實是由于頁面未重新渲染導致的，但是通過在src中添加時間戳以達到欺騙瀏覽器重新渲染的目的并未解決以上問題，后通過v-if實現(xiàn)銷毀新建iframe方式,完美解決問題。
2.2 解決措施
<iframe v-if="flagsArr[index]" :src='...+timeStamp'></iframe>
handleSelect (tab, event) {
this.index = tab.index
this.flagsArr = Array(頁簽數(shù)組.length).fill(false)
this.flagsArr[this.index] = true
vm.iframeSrc = iframeSRC
if (document.getElementById('iframe')) {
setTimeout(() => {
document.getElementById(iframeid).contentWindow.location.reload(true);
}, 200)
}
}三、拓展閱讀
3.1 keep-alive 緩存 iframe
因為iframe不在vue的虛擬節(jié)點里，所以即使使用了vue的keep-alive也不會緩存iframe頁面。
我們可以換個思路解決這個問題。首先在router.js里不要引入路徑，就是component不寫，這樣會出現(xiàn)加載這個路由，頁面是空白，然后在app.vue頁面引入iframe的組件，在<roter-view />下面加載這個iframe組件，通過v-show判斷$route.path === 'iframe的路由'，如果是iframe頁面，iframe頁面就會正常加載出來，而且不管怎么跳轉路由都會保存當前狀態(tài)，也就相當于默認把iframe頁面加載出來，只是通過display:none隱藏，如果到這個iframe路由下了，再讓其顯示。
到此這篇關于Vue iframe更改src后頁面未刷新問題解決的文章就介紹到這了,更多相關Vue iframe更改src后頁面未刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue3使用elementPlus進行table合并處理的示例詳解
虛擬數(shù)據(jù)中公司下有多個客戶,公司一樣的客戶,公司列需要合并,客戶如果一樣也需要合并進行展示,所以本文給大家介紹了vue3使用elementPlus進行table合并處理的實例,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue Router動態(tài)路由使用方法總結,需要的朋友可以參考下2023-10-10
使用 Vue 3 的 createApp方法初始化應用的基本步驟
createApp 是 Vue 3 引入的全局 API,用于創(chuàng)建一個應用實例,這篇文章主要介紹了如何使用 Vue 3 的 createApp方法初始化應用,通過 createApp 方法,我們從 Vue 3 的基本初始化開始,擴展到插件的應用、多個應用實例的創(chuàng)建等,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue通過cookie獲取用戶登錄信息的思路詳解，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue中如何給靜態(tài)資源增加路由前綴，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue2.0 ES6語法降級ES5的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue 2.5.1 源碼學習 之Vue.extend 和 data的合并策略
這篇文章主要介紹了Vue.extend 和 data的合并策略 ，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue儲存storage時含有布爾值的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
在Vue應用中,結合前端和后端接口請求實現(xiàn)動態(tài)路由,可根據(jù)用戶權限動態(tài)生成路由,提高安全性與靈活性,本文就來介紹一下前端+接口請求實現(xiàn)vue動態(tài)路由,感興趣的可以了解一下2024-09-09
后臺使用freeMarker和前端使用vue的方法及遇到的問題
這篇文章主要介紹了后臺使用freeMarker和前端使用vue的方法及遇到的問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06