¿Cómo mover un iFrame en el DOM sin perder su estado?

Bienvenido a proyecto on line, en este lugar encontrarás la resolución de lo que andabas buscando.

Solución:

No es posible mover un iframe de un lugar a otro en el dom sin que se vuelva a cargar.

Aquí hay un ejemplo para mostrar que incluso usando JavaScript nativo, los iFrames aún se recargan: http://jsfiddle.net/pZ23B/

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

Esta respuesta está relacionada con la recompensa de @djechlin

Busqué mucho en las especificaciones de w3/dom y no encontré nada final que diga específicamente que el iframe debe recargarse mientras se mueve en el árbol DOM, sin embargo, encontré muchas referencias y comentarios en trac/bugzilla/microsoft del webkit con respecto a diferentes cambios de comportamiento a lo largo de los años.

Espero que alguien encuentre algo específico con respecto a este problema, pero por ahora aquí están mis hallazgos:

1. Según Ryosuke Niwa: “Ese es el comportamiento esperado”.
2. Había un “iframe mágico” (webkit, 2010), pero se eliminó en 2012.
3. Según MS, “los recursos de iframe se liberan cuando se eliminan del DOM”. Cuando usted appendChild(node) del nodo existente – que node primero se elimina del dom.
   Cosa interesante aquí – IE<=8 no recargó el iframe - este comportamiento es (algo) nuevo (ya que IE>=9).

4. Según el comentario de Hallvord RM Steen, esta es una cita de las especificaciones de iframe

   Cuando se inserta un elemento iframe en un documento que tiene un contexto de navegación, el agente de usuario debe crear un nuevo contexto de navegación, establecer el contexto de navegación anidado del elemento en el contexto de navegación recién creado y luego procesar el iframe attributes por primera vez".

   Esto es lo más cercano que encontré en las especificaciones, sin embargo, aún requiere alguna interpretación (ya que cuando movemos el iframe elemento en el DOM realmente no hacemos un completo removeincluso si los navegadores utilizan el node.removeChild método).

Cada vez que se agrega un iframe y tiene un src attribute aplicado dispara una acción de carga similar a cuando se crea una etiqueta de imagen a través de JS. Entonces, cuando los elimina y luego los agrega, son entidades completamente nuevas y se actualizan. Es una especie de cómo window.location = window.location recargará una página.

La única forma que conozco de reposicionar iframes es a través de CSS. Aquí hay un ejemplo que reuní que muestra una forma de manejar esto con flex-box: https://jsfiddle.net/3g73sz3k/15/

La idea básica es crear un flex-box contenedor y luego defina un orden específico para los iframes usando el orden attribute en cada envoltorio iframe.

Como puede ver en el violín JS estos order estilos están en línea para simplificar el flip botón así que gire el iframes.

Obtuve la solución de esta pregunta de StackOverflow: cambiar la posición DIV solo con CSS

Espero que ayude.

Tienes la posibilidad dar visibilidad a este ensayo si si solucionó tu problema.

---

---

Utiliza Nuestro Buscador