在添加第二个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运算符执行的操作替换整个节点内容为current content + new content，因此所有可能的外部资源都会重新加载，因为它们是新内容。

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