vue 项目中关于iframe页面缓存问题

1.简介 关于ifarem标签一般用于项目内外嵌页面。比如vue中经常会遇到外嵌页面的问题,但是有需求这样的 要求外嵌页面的内容保持缓存 项目中一不小心点他其它页面 再次切换回来 防止页面外嵌页面再次刷新。

2关于使用keep-alive缓存不了iframe界面原因
很多人第一想法就是会使用 keep-alive 去实现组件缓存,但是对iframe标签是行不通的,keepalive作为缓存组件这里不过多介绍,大多用于项目中 标签的嵌套 实现出口视图页面的缓存。项目中可以发现keepalive包裹的组件的确 只触发了一次生命周期,但是每次切换 iframe标签内嵌页面依旧会在浏览器中刷新。原因在于

1.Vue 的缓存机制并不是直接存储 DOM 结构,而是将 DOM 节点抽象成了一个个 VNode节点。因此,Vue 的 keep-alive 缓存也是基于 VNode节点 而不是直接存储 DOM 节点。在需要渲染的时候从Vnode渲染到真实DOM上。
2.iframe中keep-alive机制失效原因:iframe页里的内容并不属于节点的信息,所以使用keep-alive依然会重新渲染iframe内的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口,即使把节点保存下来,在渲染时iframe页还是刷新的。

3解决方案
其实思路就很简单了,我们可以在切换不含iframe的界面时使用vue路由,在切换含iframe页的界面时利用v-show来控制显示隐藏,使iframe的节点不被删除,以此来防止界面节点被重新更新,从而达到保存iframe节点数据的效果。
简单点的实现方案就是你自己把单独需要用到iframe标签外嵌的页面 专门以组件的形式再模板页面中引入 与 出口一起同时渲染,并且根据路由的监听 控制它的显示隐藏,注意这里必须是v-show来控制,不能移除dom节点
一下是自己写的简单demo,仅供参考

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <!-- :include="cachedViews" -->
      <keep-alive>
        <router-view :key="key" v-if="status" />
      </keep-alive>
    </transition>
    <Hd v-show="this.$route.name === 'iframe'"></Hd>
  </section>
</template>

<script>
// import Vue from 'vue'
import Hd from '@/views/permission/ifarem'
export default {
  name: 'AppMain',
  components: {
    Hd
  },
  data () {
    return {
      componentsArr: [],
      status: true
    }
  },
  computed: {
    cachedViews () {
      return this.$store.state.tagsView.cachedViews
    },
    key () {
      return this.$route.path
    }
  },
  watch: {
    $route () {
      console.log(this.$route.name, '$route')
      if (this.$route.name == 'iframe') {
        this.status = false
      } else {
        this.status = true
      }
      // 判断当前路由是否iframe页
    }
  },

HD就是单独引入的iframe标签组件。方法很low,仅供实现效果。

  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值