javascript 如何防止 iframe 在 DOM 中移动时重新加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7434230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent an iframe from reloading when moving it in the DOM
提问by Savageman
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.
在此先感谢您的帮助。
采纳答案by John Fisher
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 中实际拉出并将其插入其他位置，则将无法避免重新加载。
回答by Drazisil
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.phpbetter 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 将其“粘贴”回您想要的位置。
回答by user3334255
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，因为我仍然想要回发（废话），我不得不将它移回。在阅读了这篇文章和其他几篇文章后，我想出了一个解决方案。
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:
html：
<div id="divHidden" style="display: none">
<div id="dialog" style="display: none">
</div>
</div>
回答by dekely
you need to save the 'Html' node under the iframe and after you moved the iframe, add it back
您需要在 iframe 下保存“Html”节点，移动 iframe 后，将其添加回来
