vue中内嵌iframe的src更新页面未刷新问题及解决
短信预约 -IT技能 免费直播动态提醒
vue中内嵌iframe的class="lazy" data-src更新页面未刷新
vue中，系统使用iframe内嵌了其他系统的页面，iframe的class="lazy" data-src修改了，但是iframe内部页面内容未更新，也未请求接口。
原因
iframe的class="lazy" data-src中如果带hash #，class="lazy" data-src改变是不会刷新的。
解决
方式一：可以在 # 号前加一个随机数或者时间戳，但这种方式会改变url；方式二：在组件上加key，强制刷新页面。
方式一：
this.url= `https://xxxx/xxxxx${new Date().getTime()}/#/${val.params.url}`方式二：
<template>
<div>
<iframe
:key="key"
:class="lazy" data-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的class="lazy" data-src指向的内容不刷新的解决方法之一
iframe的class="lazy" data-src的值发生改变,才会刷新iframe里面的内容.
<iframe :class="lazy" data-src="baseUrl" height="100%" frameborder="0" scrolling="auto" width="100%"></iframe>this.baseUrl = this.baseUrl + `&time=${new Date().getTime()`给url后面通过问号传值，传一个当前时间, 这个值并没有其他用处，只是为了改变class="lazy" data-src的值。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
