Vueiframe更改src后页面未刷新问题解决方法

一、场景描述

在项目开发过程中，应用iframe实现外系统页面嵌套的时候，发现引入其他页面后，页面内容并未刷新加载，经过一番研究，解决方案如下：

vm.iframeclass="lazy" data-src = iframeclass="lazy" data-src
if (document.getElementById('iframe')) {
	setTimeout(() => {
		document.getElementById(iframeid).contentWindow.location.reload(true);
	}, 200)
}

注：务必在更改iframe class="lazy" data-src属性值之后补充页面重载逻辑，否则无法解决问题。

注：window.reload是重新加载当前需要的所有内容，也就包括页面和后台的代码，此过程中实际上是从后台重新进行操作；

二、高版本浏览器页签切换后内容不刷新问题解决

在应用上面的解决措施后，发现Chrome(>75)及IE高版本浏览器下，iframe在更改了class="lazy" data-src之后对应的网页并未刷新问题复现。

2.1 解决思路

iframe下页面内容未刷新问题其实是由于页面未重新渲染导致的，但是通过在class="lazy" data-src中添加时间戳以达到欺骗浏览器重新渲染的目的并未解决以上问题，后通过v-if实现销毁新建iframe方式,完美解决问题。

2.2 解决措施

<iframe v-if="flagsArr[index]" :class="lazy" data-src='...+timeStamp'></iframe>
handleSelect (tab, event) {
	this.index = tab.index
	this.flagsArr = Array(页签数组.length).fill(false)
	this.flagsArr[this.index] = true
	vm.iframeclass="lazy" data-src = iframeclass="lazy" data-src
	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更改class="lazy" data-src后页面未刷新问题解决的文章就介绍到这了,更多相关Vue iframe更改class="lazy" data-src后页面未刷新内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！