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的值。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue实现侧边定位栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
解决el-upload批量上传只执行一次成功回调on-success的问题
这篇文章主要介绍了解决el-upload批量上传只执行一次成功回调on-success的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue v-for循环出来的数据动态绑定值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家介绍了vue实现无缝滚动手摸手教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了详解如何搭建mpvue框架搭配vant组件库的小程序项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要为大家分享了一款MVVM组件，构建自己的Vue组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了Vue.js中$refs{}如何获取DOM元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了mpvue项目中使用第三方UI组件库的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
今天小编就为大家分享一篇vue 父组件通过$refs获取子组件的值和方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要给大家介绍了关于Vue Webpack2单元测试的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-08-08
最新评论