如何在DOM中移動iframe時阻止iframe重新加載

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，因為我還想要回發（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后將其添加回來