将 Iframe 添加到文档时如何防止重新加载 Iframe？
我们使用 simplemodal jquery 插件来托管 iframe 作为对话框的内容。关闭对话框后，simplemodal 会从文档中删除对话框内容（包裹在 div 中的 iframe），然后将其添加回文档中。
以下标记演示了将 simplemodal 排除在等式之外时出现的问题。我在本文中仅提及 simplemodal，以了解为何删除并重新添加 iframe 的背景。
如何防止 Iframe 在重新添加到文档时重新加载其内容？
任何帮助将不胜感激！
测试.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>
测试2.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>
We are using the simplemodal jquery plugin to host an iframe as the contents of the dialog. 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.
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.
How do I prevent the Iframe from reloading it's contents when it is re-added to the document?
Any help would be greatly appreciated!
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
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
否则我可以推荐您使用 div + AJAX。对我来说比 iframe 效果更好，而且您不必同时设置 iframe 和辅助页面的样式。我不知道这是否适合您的需要，但我建议您至少检查一下。
I could otherwise recommend you using div + AJAX. Works much better for me then iframe and you don't have to style both the iframe and the secondary page. I don't know if this suits your need, but I recommend you checking up on it at least.
这可能无法解决您的问题，但值得一试。您不需要在 prependTo 之前调用 remove 。
prependTo 会有效地将其从当前位置取出，并将其重新附加到 DOM 中的其他位置。它不会复制它，因此您不需要“删除”原始内容
，也许这会阻止 iframe 重新加载。
不过，我确实同意@Ryuu 的回答，根本不用担心 iframe 是最好的选择。
That might not fix your problem but worth a try.. you don't need to call remove before prependTo.
prependTo will effectively take it out of its current spot and re-attach it somewhere else in the DOM. It doesn't copy it so you don't need to "remove" the original
Maybe that'll prevent the iframe from reloading.
Though, I do agree with @Ryuu's answer, don't bother with iframes at all is the best option.
您可以从 HTML 字符串创建模式，而不是从页面上的元素创建模式。这样，插件就不必从文档中删除 iframe，将其放入模式中，然后在模式关闭后将其移回。
Rather than creating the modal from an element that's on the page, you can create it from an HTML string. 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 添加到 body 元素并将其设置为
display:none;位置：绝对；。然后将占位符元素插入到 simplemodal 中，当显示模式时，使 iframe 可见并将其位置更改为占位符的位置（也匹配高度和宽度）。它可能需要摆弄 z-index 等，但这意味着您不必追加/前置/以其他方式更改 DOM，从而防止重新加载。
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;. 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).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.
我认为如果使用remove()是不可能的。
但也许你可以尝试其他方式，比如更改其大小、显示：无、不透明度：0、可见性：隐藏或其他方式。
您尝试过 detach() 吗？在 jQuery 文档中说：
要删除元素而不删除数据和事件，请改用 .detach()。
I think that it is not possible if you use remove().
But maybe you could try other way, like changing its size, display:none, opacity:0, visibility:hidden or some other.
Have you tried detach()?. In the jQuery documentation says:
To remove the elements without removing data and events, use .detach() instead.