解决iframe使用location.search进行跳转的造成的刷新闪白

原有代码

前端代码

<el-main style="">
<iframe id="myiframe" :src="src + '.html?new=' + Math.random()" frameborder="0" scrolling="yes"
style="width: 100%; height: 100%"></iframe>
</el-main>


// VUE
created() {
this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
if (location.search) {
this.src = getUrlParamValue('target')
}
},handleSelect(key) {
this.src = key
location.search = "target=" + this.src
window.setInterval("reinitIframe()", 50);
},

在处理跳转时使用了 location.search,可能导致整个页面刷新。为了避免刷新闪白，选择使用 Vue Router 来处理路由而不是直接改变 location.search。

修改后

<template>
  <el-main style="">
    <iframe id="myiframe" :src="iframeSrc" frameborder="0" scrolling="yes" style="width: 100%; height: 100%"></iframe>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      src: '',
    };
  },
  computed: {
    iframeSrc() {
      return this.src + '.html?new=' + Math.random();
    },
  },
  created() {
    this.user = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {};
    if (this.$route.query.target) {
      this.src = this.$route.query.target;
    }
  },
  methods: {
    handleSelect(key) {
      this.src = key;
      this.$router.push({ query: { target: this.src } });
      window.setInterval("reinitIframe()", 50);
    },
  },
};
</script>

这样子就完成了iframe跳转不闪白的效果