当前位置: 首页 > 知识库问答 >
问题:

前端 - Vue KeepAlive为何无法正常缓存 iframe?

穆城
2023-07-07

如题。在掘金看到的一篇文章,但是作者对于具体的原因没有说明清楚,希望有大神能够解答。
描述如下:

最近做了个项目,其中有个页面是由 iframe 嵌套了一个另外的页面,在运行的过程中发现 KeepAlive 并不生效,每次切换路由都会触发 iframe 页面的重新渲染

文章中提到的原因

iframe 很特别,当其插入到页面时会重新加载,这是浏览器特性,与 Vue 无关

附上原帖链接:
KeepAlive 为什么不能缓存 iframe

共有1个答案

宇文峰
2023-07-07

keep-alive缓存的是虚拟节点,并不是缓存真实dom。iframe页里的内容并不属于节点的信息,所以使用keep-alive依然会重新渲染iframe内的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口,即使把节点保存下来,在渲染时iframe页还是刷新的

 类似资料:
  • 我使用的是springboot 2.1.1。我使用@Enable缓存启用了缓存 CacheManager已创建并可以注入到我的类中。 一旦我添加了一个库https://github.com/MarcGiffing/bucket4j-spring-boot-starter启动应用程序时出错: 经过大量调试,我无法找到库破坏CacheManager的原因和方式。 似乎没有使用CacheAutoConf

  • 根据link,在spring boot中使用缓存的最简单配置是使用CacheManager(缓存映射将在这个类中初始化): 在: 但它抛出: 编辑:如果我在cacheManager中分配一个cacheName,并在建议的方法中使用它,异常就消失了。但是bean中的所有方法都将被缓存,而我只在一个方法上分配了。

  • 我们已经配置nginx服务器添加缓存控制头到公共和到期时间到1个月。但是当我们从浏览器发出请求时,客户端正在添加缓存控制:无缓存头。正因为如此,它每次都是新鲜下载内容,而不是提供缓存版本。 我怎样才能缓存静态文件? 如果我从终端触发请求,服务器添加的缓存控制标头在响应标头中可见。

  • 服务器向我发送json对象、过期和ETAG。我希望Voley将这个对象保存在缓存中,并在下一次请求该对象时使用对服务器的请求,包括在报头中的ETag。如果响应将是304不修改,那么它应该使用缓存的资源,如果它将是200OK,它应该使用来自服务器的新资源。 Volley根本不发送请求(如果缓存未过期),或者如果缓存过期,则发送带有If-None-Match+etag字符串的新请求。并且服务器总是以2

  • 场景是有一个主应用里面有多个子应用,其中a应用嵌入iframe(b应用)展示,可点击弹窗大屏展示; 问题1:a应用进来iframe展示操作没问题,但是点击大屏显示的时候控制台明明打印出来数据但是b应用页面没更新,使用强制刷新forceUpdate和局部刷新this.$nextTick都不好使,使用v-if也是初次进来有触发信息但是页面还是没有显示 问题2:c应用引入iframe(b应用),有复制和

  • 响应头如下,为什么浏览器命中强缓存?