Keep iframe content in vue component

Question

The problem is about how to maintain the content and state of an iframe in a component of Vue no matter the component is showing or hiding.

I tried two methods:

(1) using keep-alive together with vue-router

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

(2) take it as a sub component, using v-if to show and hide instead of vue-router

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

both methods keeps the content of component but the iframe still refreshes every time, so is there any method to achieve just hiding and showing the iframe?

A similar question is Thomas question, he also uses the vue-router method and does not work out, I agree with the opnion of Thomas that Vue just keeps the content of component but not of iframe.

Thanks a lot!

Thank you Stephen, the code does solve the problem of unnecessary refreshing of iframe, but I am wondering if this method just work in the condition that the router is unchanged, since method (1) does not keep the content of iframe? — goodBetterBest

Stephen Thomas Stephen Thomas · Accepted Answer · 2018-07-11T12:03:00

If the sub component approach works for you:

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

then a slight modification will keep the iframe from being refreshed on state changes:

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

Note that this only works if the route remains unchanged.

If you actually need to use different routes, and if the only problem with refreshing the iframe is performance, you might be able to get away with loading the iframe contents via ajax and caching it in local storage.

Keep iframe content in vue component

1 Answers