Могу ли я переместить iframe, сохранив его экземпляр / состояние?

Question

Если у меня есть iframe, настроенный на узле, могу ли я переместить его на другой узел, сохранив его текущее состояние?

Я должен сохранить поддержку IE11 для этого

const iframe = document.querySelector('#my-frame')

document.querySelector('#new-node').appendChild(iframe)
document.querySelector('#old-node').removeChild(iframe)

div{
  border: 1px dashed black;
}

<div id="old-node">
  Old node
  <iframe id="my-frame" src="https://example.com"></iframe>
</div>
<div id="new-node">
  New node
</div>

Answer 1

Вы почти правы.

Однако, поскольку элемент DOM может иметь только одного родителя одновременно, .appendChild автоматически удаляет элемент из его текущего родителя (если он уже находится в DOM) .

Следовательно, в вашем случае, когда вы вызываете .removeChild, элемент больше не является дочерним по отношению к старому родителю, а .removeChild выдает DOMException.

. двумя способами:

• Переместить вызов на .removeChild до .appendChild:

  const iframe = document.querySelector('#my-frame')
  
  document.querySelector('#old-node').removeChild(iframe)
  document.querySelector('#new-node').appendChild(iframe)
  

• Но вы можете даже пропустить вызов до .removeChild:

  const iframe = document.querySelector('#my-frame')
  
  document.querySelector('#new-node').appendChild(iframe)