Question

我有一个iframe加载了一些内容。我想在DOM中移动它而不会导致刷新（我喜欢它里面的内容，我想保留它）。

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

这可能吗？

提前感谢您的帮助。

Answer 1

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

但是，如果你试图将它从DOM中拉出来并将其插入其他地方，那么你将无法避免重新加载。

Answer 2

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

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

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

Answer 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" width="100%" height="100%" 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>

Answer 4

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

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

4 个答案: