快捷導(dǎo)航

Vue iframe更改src后頁(yè)面未刷新問(wèn)題解決方法

更新時(shí)間：2023年04月26日 17:18:40 作者：NoSilverBullet

這篇文章主要介紹了Vue iframe更改src后頁(yè)面未刷新問(wèn)題解決,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、場(chǎng)景描述

在項(xiàng)目開(kāi)發(fā)過(guò)程中，應(yīng)用iframe實(shí)現(xiàn)外系統(tǒng)頁(yè)面嵌套的時(shí)候，發(fā)現(xiàn)引入其他頁(yè)面后，頁(yè)面內(nèi)容并未刷新加載，經(jīng)過(guò)一番研究，解決方案如下：

vm.iframeSrc = iframeSRC
if (document.getElementById('iframe')) {
	setTimeout(() => {
		document.getElementById(iframeid).contentWindow.location.reload(true);
	}, 200)
}

注：務(wù)必在更改iframe src屬性值之后補(bǔ)充頁(yè)面重載邏輯，否則無(wú)法解決問(wèn)題。

注：window.reload是重新加載當(dāng)前需要的所有內(nèi)容，也就包括頁(yè)面和后臺(tái)的代碼，此過(guò)程中實(shí)際上是從后臺(tái)重新進(jìn)行操作；

二、高版本瀏覽器頁(yè)簽切換后內(nèi)容不刷新問(wèn)題解決

在應(yīng)用上面的解決措施后，發(fā)現(xiàn)Chrome(>75)及IE高版本瀏覽器下，iframe在更改了src之后對(duì)應(yīng)的網(wǎng)頁(yè)并未刷新問(wèn)題復(fù)現(xiàn)。

2.1 解決思路

iframe下頁(yè)面內(nèi)容未刷新問(wèn)題其實(shí)是由于頁(yè)面未重新渲染導(dǎo)致的，但是通過(guò)在src中添加時(shí)間戳以達(dá)到欺騙瀏覽器重新渲染的目的并未解決以上問(wèn)題，后通過(guò)v-if實(shí)現(xiàn)銷(xiāo)毀新建iframe方式,完美解決問(wèn)題。

2.2 解決措施

<iframe v-if="flagsArr[index]" :src='...+timeStamp'></iframe>
handleSelect (tab, event) {
	this.index = tab.index
	this.flagsArr = Array(頁(yè)簽數(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

因?yàn)?code>iframe不在vue的虛擬節(jié)點(diǎn)里，所以即使使用了vue的keep-alive也不會(huì)緩存iframe頁(yè)面。

我們可以換個(gè)思路解決這個(gè)問(wèn)題。首先在router.js里不要引入路徑，就是component不寫(xiě)，這樣會(huì)出現(xiàn)加載這個(gè)路由，頁(yè)面是空白，然后在app.vue頁(yè)面引入iframe的組件，在<roter-view />下面加載這個(gè)iframe組件，通過(guò)v-show判斷$route.path === 'iframe的路由'，如果是iframe頁(yè)面，iframe頁(yè)面就會(huì)正常加載出來(lái)，而且不管怎么跳轉(zhuǎn)路由都會(huì)保存當(dāng)前狀態(tài)，也就相當(dāng)于默認(rèn)把iframe頁(yè)面加載出來(lái)，只是通過(guò)display:none隱藏，如果到這個(gè)iframe路由下了，再讓其顯示。

到此這篇關(guān)于Vue iframe更改src后頁(yè)面未刷新問(wèn)題解決的文章就介紹到這了,更多相關(guān)Vue iframe更改src后頁(yè)面未刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: