将iframe添加到文档中时，如何防止其重新加载？
[英]How do I prevent an Iframe from re-loading when adding it to the document?
问题描述
We are using the simplemodal jquery plugin to host an iframe as the contents of the dialog. 
我们正在使用simplemodal jquery插件来托管iframe作为对话框的内容。 Upon closing the dialog, simplemodal removes the dialog content (an iframe wrapped in a div) from the document and then adds it back to the document. 关闭对话框后，simplemodal将对话框内容（包装在div中的iframe）从文档中删除，然后将其重新添加到文档中。
The following markup demonstrates the problem while taking simplemodal out of the equation. 以下标记说明了将简单模态排除在等式之外而出现的问题。 I only mention simplemodal in this post for context as to why the iframe is removed and re-added. 在本文中，我只提及simplemodal来说明为什么删除和重新添加iframe。
How do I prevent the Iframe from reloading it's contents when it is re-added to the document? 当iframe重新添加到文档中时，如何防止iframe重新加载其内容？
Any help would be greatly appreciated! 任何帮助将不胜感激！
test.html 的test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
iframe{ padding: 0px; margin: 0px; width: 300; height: 300; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#go").click(function() {
var frame = $("#myframe");
frame.remove();
frame.prependTo("body");
});
});
</script>
</head>
<body>
<iframe name="myframe" id="myframe" src="test2.html"></iframe>
<div>
<button id="go">GO</button>
</div>
</body>
</html>
test2.html test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("this should not get called when the iframe is re-added to the document");
});
</script>
</head>
<body>
This is iframe content.
</body>
</html>
5 个解决方案
解决方案1
1 2012-05-02 13:47:03
I think that it is not possible if you use remove(). 我认为如果使用remove（）是不可能的。 But maybe you could try other way, like changing its size, display:none, opacity:0, visibility:hidden or some other. 但是也许您可以尝试其他方法，例如更改其大小，显示：无，不透明度：0，可见性：隐藏或其他。 Have you tried detach()?. 您是否尝试过detach（）？ In the jQuery documentation says: To remove the elements without removing data and events, use .detach() instead. 在jQuery文档中说：要删除元素而不删除数据和事件，请改用.detach（）。
解决方案2
0 2011-03-22 19:37:27
Rather than creating the modal from an element that's on the page, you can create it from an HTML string. 您可以从HTML字符串创建模态，而不是从页面上的元素创建模态。 That way, the plugin doesn't have to remove the iframe from the document, put it in the modal, then move it back after the modal closes. 这样，插件无需从文档中删除iframe，将其放入模式中，然后在模式关闭后将其移回。
解决方案3
0 2011-03-22 19:39:17
The only trick I could think to do is to add the iframe to the body element and set it to display:none; position:absolute; 我唯一想做的技巧是将iframe添加到body元素并将其设置为display:none; position:absolute; display:none; position:absolute; . 。 Then insert a placeholder element into the simplemodal, and when the modal is shown make the iframe visible and change its position to that of the placeholder (also matching height and width). 然后将一个占位符元素插入到简单模式中，当显示模式时，使iframe可见并将其位置更改为占位符的位置（也匹配高度和宽度）。
It may require fiddling with the z-index and such as well, but it would mean you won't have to append/prepend/otherwise alter the DOM, thus preventing a reload. 它可能也需要弄清楚z-index等等，但这意味着您不必附加/添加/以其他方式更改DOM，从而避免了重新加载。
解决方案4
0 2011-03-22 22:32:47
I could otherwise recommend you using div + AJAX. 否则，我建议您使用div + AJAX。 Works much better for me then iframe and you don't have to style both the iframe and the secondary page. 然后，对于iframe来说，对我来说效果要好得多，您不必同时对iframe和辅助页面进行样式设置。 I don't know if this suits your need, but I recommend you checking up on it at least. 我不知道这是否适合您的需求，但我建议您至少检查一下。
解决方案5
0 2011-03-22 22:36:44
That might not fix your problem but worth a try.. you don't need to call remove before prependTo. 那可能无法解决您的问题，但值得一试。.您无需在prependTo之前调用remove。
prependTo will effectively take it out of its current spot and re-attach it somewhere else in the DOM. prependTo将有效地将其移出当前位置，并将其重新连接到DOM中的其他位置。 It doesn't copy it so you don't need to "remove" the original 它不会复制它，因此您无需“删除”原始文件
Maybe that'll prevent the iframe from reloading. 也许这样可以防止iframe重新加载。
Though, I do agree with @Ryuu's answer, don't bother with iframes at all is the best option. 虽然，我确实同意@Ryuu的回答，但完全不理会iframe是最好的选择。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.