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

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

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

文章目录

• • 一、场景描述
    • 二、高版本浏览器页签切换后内容不刷新问题解决
    • • 2.1 解决思路
        • 2.2 解决措施
    • 三、拓展阅读
    • • 3.1 keep-alive 缓存 iframe

---

一、场景描述

在项目开发过程中，应用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方式,完美解决问题。

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

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