How to move an iFrame in the DOM without losing its state?

It isn't possible to move an iframe from one place in the dom to another without it reloading.

Here is an example to show that even using native JavaScript the iFrames still reload:http://jsfiddle.net/pZ23B/

var wrap1 = document.getElementById('wrap1');var wrap2 = document.getElementById('wrap2');setTimeout(function(){    document.getElementsByTagName('body')[0].appendChild(wrap1);},10000);

This answer is related to the bounty by @djechlin

A lot of search on the w3/dom specs and didn't find anything final that specifically says that iframe should be reloaded while moving in the DOM tree, however I did find lots of references and comments in the webkit's trac/bugzilla/microsoft regarding different behavior changes over the years.

I hope someone will find anything specific regarding this issue, but for now here are my findings:

1. According to Ryosuke Niwa - "That's the expected behavior".
2. There was a "magic iframe" (webkit, 2010), but it was removed in 2012.
3. According to MS - "iframe resources are freed when removed from the DOM". When you appendChild(node) of existing node - that node is first removed from the dom.
   Interesting thing here - IE<=8 didn't reload the iframe - this behavior is (somewhat) new (since IE>=9).

4. According to Hallvord R. M. Steen comment, this is a quote from the iframe specs

   When an iframe element is inserted into a document that has a browsing context, the user agent must create a new browsing context, set the element's nested browsing context to the newly-created browsing context, and then process the iframe attributes for the "first time".

   This is the most close thing I found in the specs, however it's still require some interpretation (since when we move the iframe element in the DOM we don't really do a full remove, even if the browsers uses the node.removeChild method).

Whenever an iframe is appended and has a src attribute applied it fires a load action similarly to when creating an Image tag via JS. So when you remove and then append them they are completely new entities and they refresh. Its kind of how window.location = window.location will reload a page.

The only way I know to reposition iframes is via CSS. Here is an example I put together showing one way to handle this with flex-box:https://jsfiddle.net/3g73sz3k/15/

The basic idea is to create a flex-box wrapper and then define an specific order for the iframes using the order attribute on each iframe wrapper.

<style>  .container{    display: flex;    flex-direction: column;  }</style><div class="container">  <div id="wrap1" style="order: 0" class="iframe-wrapper">    <iframe id="iframe1" src="https://google.com"></iframe>  </div>  <div id="warp2" style="order: 1" class="iframe-wrapper">    <iframe id="iframe2" src="https://bing.com"></iframe>  </div></div>

As you can see in the JS fiddle these order styles are inline to simplify the flip button so rotate the iframes.

I sourced the solution from this StackOverflow question: Swap DIV position with CSS only

Hope that helps.