将 iframe 添加到文档时如何防止重新加载？答案

【问题标题】：How do I prevent an Iframe from re-loading when adding it to the document?将 iframe 添加到文档时如何防止重新加载？
【发布时间】：2011-03-22 19:33:19
【问题描述】：

我们使用 simplemodal jquery 插件来托管 iframe 作为对话框的内容。关闭对话框后，simplemodal 会从文档中删除对话框内容（包含在 div 中的 iframe），然后将其添加回文档中。

以下标记演示了将 simplemodal 排除在等式之外的问题。我在这篇文章中只提到 simplemodal 是为了说明为什么要删除和重新添加 iframe。

如何防止 iframe 在重新添加到文档时重新加载其内容？

任何帮助将不胜感激！

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>

【问题讨论】：

标签： javascript jquery dom simplemodal

【解决方案1】：

我认为如果你使用 remove() 是不可能的。但是也许您可以尝试其他方式，例如更改其大小，显示：无，不透明度：0，可见性：隐藏或其他。您是否尝试过分离（）？在 jQuery 文档中说：要删除元素而不删除数据和事件，请改用 .detach()。

【讨论】：

【解决方案2】：

您可以从 HTML 字符串创建模式，而不是从页面上的元素创建模式。这样，插件就不必从文档中删除 iframe，将其放入模态框，然后在模态框关闭后将其移回。

【讨论】：

【解决方案3】：

我能想到的唯一技巧是将 iframe 添加到 body 元素并将其设置为 display:none; position:absolute;。然后在 simplemodal 中插入一个占位符元素，当模态显示时，使 iframe 可见并将其位置更改为占位符的位置（也匹配高度和宽度）。

它可能还需要调整 z-index 等，但这意味着您不必附加/前置/以其他方式更改 DOM，从而防止重新加载。

【讨论】：

【解决方案4】：

否则我会建议您使用 div + AJAX。对我来说效果比 iframe 好得多，而且您不必同时设置 iframe 和辅助页面的样式。我不知道这是否适合您的需要，但我建议您至少检查一下。

【讨论】：

【解决方案5】：

这可能无法解决您的问题，但值得一试。您无需在 prependTo 之前调用 remove。

prependTo 将有效地将其从当前位置移出并重新附加到 DOM 中的其他位置。它不会复制它，因此您无需“删除”原始文件

也许这会阻止 iframe 重新加载。

虽然，我同意@Ryuu 的回答，但最好不要使用 iframe。

【讨论】：

不幸的是，这仍然会导致 iframe 重新加载。在我们能够进行更大的努力之前，我们一直与 iframe 联系在一起。我们正在使用一个长期运行的代码库。不过感谢您的建议。