使用 appendChild 将 iframe 移动到不同的父级时如何防止 iframe 重新加载答案

【问题标题】：How to prevent iframe to reload when moving it to a different parent with appendChild使用 appendChild 将 iframe 移动到不同的父级时如何防止 iframe 重新加载
【发布时间】：2018-02-22 15:06:31
【问题描述】：

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

当使用appendChild() 移动 iframe 元素时，它也会重新加载，从而重置状态。有没有可能防止这种情况发生？

我创建了一个活生生的例子来证明这一点。 https://jsbin.com/kejoweniva/edit?output

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

html

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

javascript

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

【问题讨论】：

在不重新加载的情况下，无法将 iframe 从 dom 中的一个位置移动到另一个位置。

标签： javascript html iframe

【解决方案1】：

如果不重新加载，就无法将 iframe 从 dom 中的一个位置移动到另一个位置。当您尝试使用 appendChild() 或 insertBefore() 等方法移动 iframe 时，浏览器如何解释事件是一个错误。

如果您只需要在页面上移动 IFrame，则可以使用 css Workarounds。这是基于您的工作的JsFiddle example。

【讨论】：

我需要 iframe 的父元素来改变我的情况
很抱歉，移动 IFrame SOM 位置会导致重新加载内容。