javascript - 添加第二个 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 上使用 += 运算符所做的是 用当前内容 + 新内容替换节点的全部内容，因此所有可能的外部资源都将重新加载，因为它们是新内容。

为了避免这种情况，您必须使用正确的 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>');