时间戳

首页 > 解决方案 > 将 iframe 内容保存在 vue 组件中

iframe - 将 iframe 内容保存在 vue 组件中

问题描述

问题在于如何在 Vue 的组件中维护 iframe 的内容和状态，无论组件是显示还是隐藏。

我尝试了两种方法：

(1) 配合vue-router使用keep-alive

<keep-alive>
  <router-view>
    <Component></Component>
  </router-view>
</keep-alive>

(2) 把它作为子组件，使用v-if来显示和隐藏，而不是vue-router

<Component v-if="$store.state.isShow"></Component>

这两种方法都保留了组件的内容，但 iframe 仍然每次都会刷新，那么有什么方法可以实现只隐藏和显示 iframe 吗？

一个类似的问题是Thomas question，他也是使用 vue-router 的方法，但没有解决，我同意 Thomas 的观点，即 Vue 只保留组件的内容而不保留 iframe 的内容。

非常感谢！

标签： iframevue.js

解决方案

如果子组件方法适合您：

<Component v-if="$store.state.isShow"></Component>

然后稍作修改将使 iframe 在状态更改时不会被刷新：

<Component v-show="$store.state.isShow"></Component>

请注意，这只适用于路线保持不变的情况。

如果您确实需要使用不同的路由，并且刷新 iframe 的唯一问题是性能，您可能可以通过 ajax 加载 iframe 内容并将其缓存在本地存储中。

推荐阅读