添加第二个 iFrame 时防止 iFrame 刷新

Question

我正在开发一个包含多个 iFrame 的网络应用程序。框架可以随时添加到 DOM 中。我目前可以成功地将 iFrame 添加到应用程序中，但是，当新的 iframe 加载时，其他 iframe 也会重新加载。在静态网页的情况下，这很好，但在我的应用程序中，iframe 有小部件正在运行，不得不手动恢复它们的状态变得很痛苦。

有没有办法在添加新 iframe 时阻止原始 iframe 刷新？

原文：

<iframe src="example.com" id="iframe1"></iframe>
document.getElementById("iframe1").contentWindow.whatever

事情发生后：

<iframe src="example.com" id="iframe1"></iframe>
<iframe src="example.org" id="iframe2"></iframe>

iframe2 加载和 iframe1 重新加载

首选行为：

iframe2 加载，iframe1 保持原样，直到我明确调用 reload()

编辑：

在控制台上运行多次

document.body.innerHTML += '<iframe src="http://example.com"></iframe>';

可以在我的窗口管理器中查看此行为的示例

http://magnesiumbeta.com/Window.html（在添加第二个窗口之前将窗口移动到其他位置，以查看它们都刷新）

Answer 1

附加 DOM 内容以这种方式不受支持，您在 .innerHTML 上使用 += 运算符所做的操作是将节点的全部内容替换为 @987654325 @，因此所有可能的外部资源都被重新加载，因为它们是新内容。

为了避免这种情况，您必须使用正确的 DOM 方法来附加子节点，即Node.appendChild()

var iframe = document.createElement('iframe');
iframe.src = 'http://example.com';
document.body.appendChild(iframe);

或者既然您已经在使用 jQuery，请使用它自己的 append() 方法。

$(document.body).append('<iframe src="http://example.com"></iframe>');