vue中内嵌iframe的src更新页面未刷新问题及解决
更新时间：2022年12月09日 14:43:37 作者：风如也
这篇文章主要介绍了vue中内嵌iframe的src更新页面未刷新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue内嵌iframe的src更新页面未刷新
vue中，系统使用iframe内嵌了其他系统的页面，iframe的src修改了，但是iframe内部页面内容未更新，也未请求接口。
原因
iframe的src中如果带hash #，src改变是不会刷新的。
解决
方式一：可以在 # 号前加一个随机数或者时间戳，但这种方式会改变url；方式二：在组件上加key，强制刷新页面。
方式一：
this.url= `https://xxxx/xxxxx${new Date().getTime()}/#/${val.params.url}`方式二：
<template>
<div>
<iframe
:key="key"
:src="url"
width="100%"
height="100%"
frameborder="0"
></iframe>
</div>
</template>
<script>
export default {
data() {
return {
url: "",
key: new Date().getTime()
}
},
watch: {
$route: {
handler(val) {
this.key = new Date().getTime()
this.url= `https://xxx/xxx/#/${val.params.url}`
},
immediate: true,
},
},
}
</script>iframe的src指向的内容不刷新的解决方法之一
iframe的src的值发生改变,才会刷新iframe里面的内容.
<iframe :src="baseUrl" height="100%" frameborder="0" scrolling="auto" width="100%"></iframe>
this.baseUrl = this.baseUrl + `&time=${new Date().getTime()`给url后面通过问号传值，传一个当前时间, 这个值并没有其他用处，只是为了改变src的值。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue2.0采用了虚拟DOM来代替对真实DOM的操作，最后通过某种机制来完成对真实DOM的更新，渲染视图。这篇文章主要介绍了vue2.0的虚拟DOM渲染,需要的朋友可以参考下2018-08-08
Vue-DPlayer是一个易于使用、高性能的基于Vue.js的视频播放器组件,本文给大家介绍Vue DPlayer详细使用,本文将从四个方面对Vue-DPlayer进行详细的阐述,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了vue.js购物车添加商品组件的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
今天小编就为大家分享一篇vuejs 动态添加input框的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
vue+element ui表格添加多个搜索条件筛选功能(前端查询)
这篇文章主要给大家介绍了关于vue+element ui表格添加多个搜索条件筛选功能的相关资料,最近在使用element-ui的表格组件时,遇到了搜索框功能的实现问题,需要的朋友可以参考下2023-08-08
今天小编就为大家分享一篇element-ui 上传图片后清空图片显示的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了Vue的键盘事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
在做完一个项目后，之后的维护尤为重要。这时，如果项目配置了错误日志记录，这样能大大减少维护难度。虽然不一定能捕获到全部的错误，但是一般的错误还是可以监测到的。这样就不用测试人员去一遍一遍复现bug了2022-10-10
摘要：Vue多选框回填是实现表单数据高效处理的常见需求,本文主要介绍了vue el-table实现多选框回填的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
Vue项目从webpack3.x升级webpack4不完全指南
前段时间，泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本，现在才拉出来记录一下，已备忘之用，也和大家分享一下,需要的朋友可以参考下2019-04-04
最新评论