首页
编程最新

分类

当前位置: 云海天教程网 > 技术新闻 > 编程最新 >正文

vue中内嵌iframe的src更新页面未刷新问题及解决【mysql入门】

更新时间:2022-12-09  作者:佚名   来源: 网络转载

vue中内嵌iframe的src更新页面未刷新问题及解决【mysql入门】【vue面试】

vue中内嵌iframe的src更新页面未刷新

vue中,系统使用iframe内嵌了其他系统的页面,iframesrc修改了,但是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的值。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持云海天教程。

上一篇:C#实现屏幕抓图并保存的示例代码【.Net面试】 下一篇:Android IntentFilter的匹配规则示例详解
小编推荐
快速导航更多>>
JavaScript 教程 HTML5 教程 CSS3 教程 jQuery 教程 Vue.js 教程 Node.js 教程 SQL 教程 C 教程 PHP 教程 Linux 教程 Docker 教程 Nginx 教程 Python 教程 Java 教程

云海天教程网 版权所有

 陕公网安备 61050202000585号

陕ICP备14013131号-3