CODEWITHSUNDEEP
javascriptdomiframeappendchild
Ivin
Ivin

Reputation: 4825

Keep references to iframe and insert them back to DOM without a reflow, repaint inside iframe

I have a website that loads some of the subdomains within an iframe. It could be 5 or 10 or any larger number of iframe. Users have the option to switch between these iframe. At any point only 1 iframe would be shown in the screen.

Now, to avoid the reload of each iframe when switching back and forth 2 iframes, I have tried to keep them in the dom itself, and hide or show based on which is selected at the moment. But this is proving to be expensive as user opens more and more iframes, it increases the DOM size.

As a solution I tried maintaining a reference to the iframe, and use removeChild to remove it from parent. When user switches back to it, I will use the stored reference to append the iframe to its parent container.

But this is causing the iframe to reload/refresh. It feels like a fresh load of its contents, than rendering what was there already before removing it from DOM.

Is this expected? Is there a way to optimise this in such way that the iframe that gets added back doesnt go through full network requests and fetch and render?

Thanks!

Upvotes: 0

Views: 48

Answers (1)

David Bradshaw
David Bradshaw

Reputation: 13087

The short answer, is that when you add an iframe you're opening a new webpage and it is effectively the same as opening a new tab. The best you can do is to use display: hidden to not show the ones you're not interested in. This should at least pause any scripts they have running in them.

The longer answer, is if you're prepared to put some effort into it, then I would suggest looking at using a ServiceWorker to build a proxy server in the browser.

I found the following project on GitHub which might help and Google lists a few articles if you search for service worker proxy.

https://github.com/DannyMoerkerke/swopr

Upvotes: 1

Related Questions