Moving Iframes. They reload.

This fiddle demonstrates how when an iframe is the target of a DOM manipulation (insertBefore, appendChild, maybe others), it'll fully reload its contents.

by David Iglesias

HTML

<div id='rotate'>
  <button data-direction='down'>Iframe ⬆️</button>
  <button data-direction='up'>Iframe ⬇️</button>
</div>

<div id='target'>
</div>

<p>
The iframe will reload when it goes from last to first (<tt>insertBefore(iframe, other)</tt>), or from first to last (<tt>appendChild(iframe)</tt>).

There's possibly other DOM manipulations that will cause the iframe to reload as well, especially when it is the target element of the move (not a reference node).
</p>

CSS

/* Nothing on this stylesheet matters, this is just eye candy. */
* { font-family: sans-serif; box-sizing: border-box; }
tt { font-family: monospace; background-color: #eee; }

.filler {
  background: #fabada;
  border: 1px solid black;
  text-align: center;
}
iframe {
  width: 100%;
  height: 200px;
  border: 1px solid black;
  margin: 0px;
}
#rotate {
  margin: 10px 0px;
  text-align: center;
}

JavaScript

const target = document.querySelector('#target');

// Inject some filler divs...
for(let i=0; i < 3; i++) {
	const div = document.createElement('div');
  div.className = 'filler';
  div.innerHTML = i;
  target.appendChild(div);
}

// Inject an iframe...
const iframe = document.createElement('iframe');
iframe.src = 'https://www.flutter.dev/';
target.appendChild(iframe);

const rotate = document.querySelector('#rotate');
rotate.addEventListener('click', (event) => {
	const firstChild = target.children[0];
  const direction = event.target.dataset.direction;
  if (direction === 'up') {
    // Move Last to First
    const lastChild = target.children[target.children.length-1];
    target.insertBefore(lastChild, firstChild);
  } else if (direction === 'down') {
    // Move First to Last
    target.appendChild(firstChild);
  }
});