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

Preventing an iFrame from refreshing upon adding a second iFrame

本文关键字：iFrame 刷新 第二个 添加 防止      更新时间：2023-09-26

我正在开发一个包含多个iFrame的web应用程序。这些帧可以在任意点添加到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（在添加第二个窗口之前，将窗口移动到其他位置，以查看它们是否都刷新）

不支持以这种方式附加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>');
相关文章：