Vue进阶（六十四）：iframe更改src后页面未刷新问题解决

2024-04-08 04:37:20

文章目录

一、场景描述
二、高版本浏览器页签切换后内容不刷新问题解决
- 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方式,完美解决问题。

2.2 解决措施

<iframe v-if="flagsArr[index]" :src='...+timeStamp'></iframe>
handleSelect (tab, event) {this.index = tab.indexthis.flagsArr = Array(页签数组.length).fill(false)this.flagsArr[this.index] = truevm.iframeSrc = iframeSRCif (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后页面未刷新问题解决相关推荐

J2EE进阶(二十四)JBoss Web和 Tomcat的区别
J2EE进阶(二十四)JBoss Web和 Tomcat的区别在Web2.0的浪潮中,各种页面技术和框架不断涌现,为服务器端的基础架构提出了更高的稳定性和可扩展性的要求.近年来,作为开源中间件的全球 ...
[Python从零到壹] 六十四.图像识别及经典案例篇之图像傅里叶变换和傅里叶逆变换详解
祝大家新年快乐,阖家幸福,健康快乐! 欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所 ...
【Vue2.0学习】—插槽（六十四）
[Vue2.0学习]-插槽(六十四) 作用:让父组件可以向子组件指定的位置插入html结构,也是一种组件间通信的方式,适用于父组件=>子组件分类:默认插槽.具名插槽.作用域插槽默认插槽使 ...
QT开发（六十四）——QT样式表（二）
QT开发(六十四)--QT样式表本文主要翻译自QT官方文档Qt Style Sheets . 五.QT样式表参考 QT样式表支持多种的属性.状态和子控件,使得定制组件的外观成为可能. 1.组件以下 ...
Console-算法[for]-国王与老人的六十四格
ylbtech-Arithmetic:Console-算法[for]-国王与老人的六十四格 1.A,案例 -- ============================================ ...
JavaScript学习（六十四）—关于JS的浮点数计算精度问题解决方案
JavaScript学习(六十四)-关于JS的浮点数计算精度问题解决方案您的语言没有中断,它正在执行浮点数学运算.计算机只能本地存储整数,因此它们需要某种表示十进制数字的方式.此表示并不完全准确.这 ...
信息系统项目管理师核心考点（六十四）信息安全基础知识重要概念
科科过为您带来软考信息系统项目管理师核心重点考点(六十四)信息安全基础知识重要概念,内含思维导图+真题 [信息系统项目管理师核心考点]信息安全基础知识重要概念 1.加密技术 ①对称加密[加密与解密的秘 ...
C语言/C++常见习题问答集锦(六十四) 之兔子繁殖(递归与非递归)
C语言/C++常见习题问答集锦(六十四) 之兔子繁殖(递归与非递归) 程序之美 1.C语言,计算1乘以3×5*-乘n的积,并输出结果,n值由键盘接收. #include<stdio.h>v ...
观音灵签第六十四签下签卯宫古人马前覆水
偶今日去凤凰山烧香拜佛求签,求得第六十四签下签 "(古人)马前覆水",内容如下: 签文游鱼却在碧波池,撞遭罗网四边围: 思量无计番身出,事到头来惹是非. 诗意此卦鱼遭罗网之象. ...

最新文章

热门文章