Javascript 如何防止在将iframe移动到具有appendChild的其他父对象时重新加载iframe

我需要将iframe移动到另一个父元素，保持iframe状态（保留滚动位置和可能已输入表单的任何信息，等等）

使用

appendChild（）

移动iframe元素时，它也会重新加载，从而重置状态。有可能防止这种情况吗

我创建了一个实例来说明这一点

打开示例，滚动，然后单击按钮，iframe在附加到新父对象时自动重新加载

html

---

如果不重新加载iframe，则无法将其从dom中的一个位置移动到另一个位置。 当您尝试使用

appendChild（）

或

insertBefore（）

等方法移动iframe时，浏览器如何解释事件是一个错误

如果只需要在页面上移动IFrame，可以使用css解决方法。

---

这是一个基于您的工作的示例。

如果不重新加载iframe，则无法将其从dom中的一个位置移动到另一个位置。我需要更改iframe的父元素。很抱歉，移动iframe SOM位置将导致重新加载内容。

  <div class="target"></div>
  <iframe src="https://2017.cssconf.eu/"></iframe>
  <button onclick="moveIframe()">move iframe</button>

function moveIframe() {
  console.log('moving iframe')
  var iframe = document.getElementsByTagName('iframe')[0]
  document.getElementsByClassName('target')[0].appendChild(iframe)
}