如何防止 iframe 在 DOM 中移动时重新加载

Question

我有一个加载了一些内容的 iframe。我想将它移动到 DOM 内部而不引起刷新（我喜欢其中的内容，我想保留它）。

我正在做一些基本的 node.appendChild(iframe) 来完成这项工作。

这可能吗？

预先感谢您的帮助。

Answer 1

如果您尝试以视觉方式移动它，可以尝试修改 CSS 以使用绝对定位或其他一些调整。

但是，如果您尝试将其从 DOM 中实际拉出并将其插入其他位置，则将无法避免重新加载。

Answer 2

我不这么认为，因为当 iframe 放回 DOM 中时，浏览器将重新渲染/重新加载 iframe。

http://polisick.com/moveNode.php 更好地解释了它。

要移动节点，您可以调用removeNode将其从树中取出并放入内存中，然后appendNode将其“粘贴”回您想要的位置。

Answer 3

我在 jQueryUI 对话框中的 iFrame 上遇到了类似的问题。 jQuery 将 div（包含我的 iFrame）移出了 DOM，并且因为我仍然想要回发（废话），所以我不得不将其移回来。阅读这篇文章和其他几篇文章后，我想出了一个解决方案。

我注意到的简单想法是 iFrame 在移动时会重新加载。因此，在将 div 移回 DOM 后，我将 iFrame 添加到对话框容器 (div) 中。这是可行的，因为 jQuery 不关心容器中的内容。这是一些示例代码：

对话框打开/关闭功能：

open:

function () {
    $(this).parent().appendTo("form").css("z-index", "9000"); //Move the div first
    $(this).append('<iframe id="iFrame" allowtransparency="true" frameborder="0" width="100%" height="100%" src="somePage.aspx"></iframe>');}, //then add the iframe
}

close:

function() {
    $(this).empty(); //clear the iframe out because it is added on open, 
    //if you don't clear it out, you will get multiple posts
    $(this).parent().appendTo("divHidden"); //move the dialog div back (good house-keeping)
}

html:

<div id="divHidden" style="display: none">
    <div id="dialog" style="display: none">
    </div>
</div>

Answer 4

您需要将“Html”节点保存在 iframe 下，并在移动 iframe 后将其添加回来