Vue iframe更改src後頁面未刷新問題解決方法

Posted on by

一、場景描述

在項目開發過程中，應用iframe實現外系統頁面嵌套的時候，發現引入其他頁面後，頁面內容並未刷新加載，經過一番研究，解決方案如下：

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

註：務必在更改iframe src屬性值之後補充頁面重載邏輯，否則無法解決問題。

註：window.reload是重新加載當前需要的所有內容，也就包括頁面和後臺的代碼，此過程中實際上是從後臺重新進行操作；

二、高版本瀏覽器頁簽切換後內容不刷新問題解決

在應用上面的解決措施後，發現Chrome(>75)及IE高版本瀏覽器下，iframe在更改瞭src之後對應的網頁並未刷新問題復現。

2.1 解決思路

iframe下頁面內容未刷新問題其實是由於頁面未重新渲染導致的，但是通過在src中添加時間戳以達到欺騙瀏覽器重新渲染的目的並未解決以上問題，後通過v-if實現銷毀新建iframe方式,完美解決問題。

2.2 解決措施

<iframe v-if="flagsArr[index]" :src='...+timeStamp'></iframe>
handleSelect (tab, event) {
	this.index = tab.index
	this.flagsArr = Array(頁簽數組.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的虛擬節點裡，所以即使使用瞭vue的keep-alive也不會緩存iframe頁面。

我們可以換個思路解決這個問題。首先在router.js裡不要引入路徑，就是component不寫，這樣會出現加載這個路由，頁面是空白，然後在app.vue頁面引入iframe的組件，在<roter-view />下面加載這個iframe組件，通過v-show判斷$route.path === 'iframe的路由'，如果是iframe頁面，iframe頁面就會正常加載出來，而且不管怎麼跳轉路由都會保存當前狀態，也就相當於默認把iframe頁面加載出來，隻是通過display:none隱藏，如果到這個iframe路由下瞭，再讓其顯示。

到此這篇關於Vue iframe更改src後頁面未刷新問題解決的文章就介紹到這瞭,更多相關Vue iframe更改src後頁面未刷新內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：