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

Posted 2023-02-22

【中文标题】如何防止 iframe 在 DOM 中移动时重新加载

【英文标题】：How to prevent an iframe from reloading when moving it in the DOM

【发布时间】：2011-11-18 01:16:21

【问题描述】：

我有一个加载了一些内容的 iframe。我想在不刷新的情况下将它移动到 DOM 中（我喜欢它里面的内容，我想保留它）。

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

这可能吗？

提前感谢您的帮助。

【参考方案1】：

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

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

【讨论】：

不，我不想在视觉上移动它。所以我害怕的是真实的。太糟糕了。 :'(

尚未跨浏览器测试；但看起来您可以在单个父节点内重新排列节点，包括 iframe，而无需使用insertBefore() 触发刷新。例如，iframe.parentNode.insertBefore(iframe, iframe.parentNode.firstChild);

【参考方案2】：

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

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

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

【讨论】：

我不想删除它并把它放回去。我只是想移动它。

它就是这样被移动的。与剪贴板相同。剪切/粘贴。

好的。看起来不是最佳的，但我不知道它是如何工作的......谢谢。

【参考方案3】：

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

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

对话框打开/关闭函数：

打开：

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

关闭：

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>

【参考方案4】：

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