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

I have an iframe loaded with some content. I would like to move it inside the DOM without causing a refresh (I like the content inside it, I want to keep it).

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

I'm doing some basic node.appendChild(iframe) to do the job.

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

Is that possible?

那可能吗?

Thanks in advance for your help.

在此先感谢您的帮助。

4 个解决方案

#1

If you're trying to move it visually, you can try modifying the CSS to use absolute positioning or some other adjustments.

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

However, if you're trying to actually pull it out of the DOM and insert it somewhere else, you won't be able to avoid a reload.

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

#2

I don't think so, as the browser is going to re-render/reload the iframe when it's put back in the DOM.

我不这么认为,因为浏览器会在iframe重新放入DOM时重新渲染/重新加载iframe。

http://polisick.com/moveNode.php better explains it.

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

To move a node you call removeNode to take it out of the tree and into memory, then appendNode to 'paste' it back where you want it.

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

#3

-2

I had a similar problem with an iFrame in a jQueryUI dialog box. jQuery moves the div (containing my iFrame) out of the DOM and because I still wanted postbacks (duh), I had to move it back. After reading this and several other posts, I came up with a solution.

我在jQueryUI对话框中遇到了与iFrame类似的问题。 jQuery将div(包含我的iFrame)移出DOM,因为我还想要回发(duh),我不得不把它移回去。在阅读了这篇文章和其他几篇文章后,我想出了一个解决方案。

The simple idea that I noticed is that the iFrame reloads when it is moved. So, I added the iFrame into the dialog container (div) after moving the div back into the DOM. This works because jQuery doesn't care about what's in the container. Here is some sample code:

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

Dialog open/close functions:

对话框打开/关闭功能:

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>

#4

-4

you need to save the 'Html' node under the iframe and after you moved the iframe, add it back

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

#1