vue中内嵌iframe的src更新页面未刷新问题及解决

2022-12-09 14:39:44 作者：风如也

这篇文章主要介绍了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>
    <iframe
      :key="key"
      :src="url"
      width="100%"
      height="100%"
      frameborder="0"
    ></iframe>
</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的值。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3 Element-plus el-menu无限级菜单组件封装过程 — Vue3 Element-plus el-menu无限级

工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终

电脑版 - 返回首页

2006-2023 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号

推荐文章

睿智的牛肉面 · 《桃子冰糕(无删减)樱花漫画》老王磁力（不迷路）_神马电影院手机播放免费-热映库 - 2023年免费老师 - 湘潭专业技术人员继续教育网 - 湘潭市专业技术人员继续教育基地在线培训平台，由湘潭医卫职业

1 年前

曾深爱过的八宝粥 · 一位老师，一根绳子，一段传奇！广州教师赖宣治当选第八届全国道德模范

1 年前

卖萌的小马驹 · jmx 服务 url有什么用 - CSDN文库

1 年前

会开车的烈马 · 《深宅迷案》高清下载-电影-夕阳小站

3 年前

气势凌人的企鹅 · springsecurity 认证之授权码模式 - 小鸟云

3 年前