Vue进阶（六十四）：iframe更改src后页面未刷新问题解决_vue iframe 重新点击不会刷新问题(3)

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端视频资料：

一、场景描述

在项目开发过程中，应用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)
	}
}

三、拓展阅读

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

链图片转存中…(img-UOyjHtOZ-1715841295644)]

[外链图片转存中…(img-GbcVS8DD-1715841295645)]