如何从页面中临时删除 iframe，然后在不重新下载 iframe 内容的情况下重新添加 iframe？

Question

我有一个包含一些 IFrame 的页面。这些 IFrame 位于同一域中。我想在打开模态 window 时从页面中删除 iframe 内容，以减少模态 window.

中的滞后

然后，当我关闭模式 window 时，我希望将 IFrames 重新附加到页面。

问题是，当我重新附加 IFrames 时，我尝试的每种方法都会重新下载它们。我不确定是否可以这样做。

例如，jQuery 有一个分离方法，应该不需要您再次下载内容，但这不起作用。

var detatchWidgets =  $container.find("iframe");

detatchWidgets.detach();

msgDialog.on('hidden.bs.modal', function(){
    $container.append(detatchWidgets);    
});

Answer 1

首先，对不起，如果我误解了你。只是为了测试我创建了 2 个 JSFIDDLE：

1) 我用作 iframe 的 src，它会在 iframe 加载后 2 秒发出警报

https://jsfiddle.net/hr97240j/10/

setTimeout(function(){
    alert("loaded and iframe says hello");
},2000);

2) 这是嵌入了iframe的页面。

https://jsfiddle.net/hr97240j/12/

第二次我显示iframe，然后隐藏它，3秒后我再次显示它，我可以说，iframe的src没有再次重新加载！我看到 iframe 的内容，但没有像第一次加载时那样出现任何新警报。

如何从页面中临时删除 iframe，然后在不重新下载 iframe 内容的情况下重新添加 iframe？

How can you temporary remove an iframe from a page, and later add the iframe back without re-downloading the iframe content?

javascript

jquery

performance

iframe

detach