Vue iframe更改src后页面未刷新问题解决方法
一、场景描述
在项目开发过程中，应用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后页面未刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue3使用elementPlus进行table合并处理的示例详解
虚拟数据中公司下有多个客户,公司一样的客户,公司列需要合并,客户如果一样也需要合并进行展示,所以本文给大家介绍了vue3使用elementPlus进行table合并处理的实例,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Vue Router动态路由使用方法总结,需要的朋友可以参考下2023-10-10
使用 Vue 3 的 createApp方法初始化应用的基本步骤
createApp 是 Vue 3 引入的全局 API,用于创建一个应用实例,这篇文章主要介绍了如何使用 Vue 3 的 createApp方法初始化应用,通过 createApp 方法,我们从 Vue 3 的基本初始化开始,扩展到插件的应用、多个应用实例的创建等,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue通过cookie获取用户登录信息的思路详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了vue中如何给静态资源增加路由前缀，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了Vue2.0 ES6语法降级ES5的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
这篇文章主要介绍了Vue.extend 和 data的合并策略 ，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue储存storage时含有布尔值的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-06-06
在Vue应用中,结合前端和后端接口请求实现动态路由,可根据用户权限动态生成路由,提高安全性与灵活性,本文就来介绍一下前端+接口请求实现vue动态路由,感兴趣的可以了解一下2024-09-09
后台使用freeMarker和前端使用vue的方法及遇到的问题
这篇文章主要介绍了后台使用freeMarker和前端使用vue的方法及遇到的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
最新评论