一、场景描述
在项目开发过程中,应用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 解决措施
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的组件,在下面加载这个iframe组件,通过v-show判断$route.path === 'iframe的路由',如果是iframe页面,iframe页面就会正常加载出来,而且不管怎么跳转路由都会保存当前状态,也就相当于默认把iframe页面加载出来,只是通过display:none隐藏,如果到这个iframe路由下了,再让其显示。
版权声明
本文仅代表作者观点。
本文系作者授权发表,未经许可,不得转载。
发表评论