使用 appendChild 將 iframe 移動到不同的父級時，如何防止重新加載 iframe

Question

我需要將 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)
}

Answer 1

不可能在不重新加載的情況下將 iframe 從 dom 中的一個位置移動到另一個位置。 當您嘗試使用appendChild()或insertBefore()等方法移動 iframe 時，它​​的一個錯誤在於瀏覽器如何解釋事件。

如果您只需要在頁面上移動 IFrame，則可以使用 css Workarounds。 這是一個基於您工作的JsFiddle 示例。