如题。在掘金看到的一篇文章,但是作者对于具体的原因没有说明清楚,希望有大神能够解答。
描述如下:
最近做了个项目,其中有个页面是由 iframe 嵌套了一个另外的页面,在运行的过程中发现 KeepAlive 并不生效,每次切换路由都会触发 iframe 页面的重新渲染
文章中提到的原因
iframe 很特别,当其插入到页面时会重新加载,这是浏览器特性,与 Vue 无关
附上原帖链接:
KeepAlive 为什么不能缓存 iframe
如题。在掘金看到的一篇文章,但是作者对于具体的原因没有说明清楚,希望有大神能够解答。
描述如下:
最近做了个项目,其中有个页面是由 iframe 嵌套了一个另外的页面,在运行的过程中发现 KeepAlive 并不生效,每次切换路由都会触发 iframe 页面的重新渲染
文章中提到的原因
iframe 很特别,当其插入到页面时会重新加载,这是浏览器特性,与 Vue 无关
附上原帖链接:
KeepAlive 为什么不能缓存 iframe
keep-alive是vue自己实现的,缓存自己的虚拟dom。iframe vue做不到,也无法操作。所以每次打开都是重新请求。如果iframe能缓存的话,那前端微服务就简单多了
这篇文章里面也没提到是怎么使用的 iframe
啊?是每次修改 src
还是 iframe
内部的页面跳转。
只能理解文章想要说的业务场景是,以下代码块中的 component
可能会被渲染成一个包含 iframe
页面组件?
<router-view v-slot="{ Component }">
<keep-alive :include="keepAliveList">
<component :is="Component"></component>
</keep-alive>
</router-view>
然后每次切换路由再返回到有 iframe
页面时,iframe
会显示重新载入。
这个现象我也做了一个简单的Demo复现了。
原因我看文章内也说了,就是 iframe
插入到页面时会重新加载。这个是浏览器部分的原因(而且不光是这样,其实你移动 iframe
元素到页面其他位置也会重新加载)。
另外一部分就是 iframe
的元素节点上是不会存有内部浏览信息的,所以每次转换成 vnode
时会丢失内部信息。但是就算能获取到内部信息,在第二次渲染 iframe
时也没办法去设置内容信息,去恢复之前的“状态”。
所以就是从浏览器的方面和具体功能实现方面都有原因存在。
27 回答12.9k 阅读
6 回答2.3k 阅读✓ 已解决
8 回答3.4k 阅读✓ 已解决
6 回答1.2k 阅读✓ 已解决
5 回答5.3k 阅读✓ 已解决
3 回答1.7k 阅读
6 回答1k 阅读
keep-alive缓存的是虚拟节点,并不是缓存真实dom。iframe页里的内容并不属于节点的信息,所以使用keep-alive依然会重新渲染iframe内的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口,即使把节点保存下来,在渲染时iframe页还是刷新的