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>
更多推荐
已为社区贡献31条内容
所有评论(0)