在IFRAME中动态更新JavaScript后重置状态

我正在制作一个简单的web应用程序，动态创建一个由HTML、JavaScript和CSS组成的网页。通过一个

IFRAME

中的一些基本UI，我让用户选择选项，然后在另一个

IFRAME

中每次发生变化时创建页面。我使用如下代码重建页面：

var iframe = document.getElementById('output_frame');
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html_content);
iframe.contentWindow.document.close();

它对静态内容非常有效，但我也包括了一堆第三方lib，虽然它提供的功能在第一次创建页面时可以正常工作，但在后续更改时，它们会中断。例如，帧速率计数器从60hz或其附近开始，但在每次更改/更新周期后迅速上升

当我将页面写入磁盘并正常加载时，当然一切正常

我想这是因为以这种方式更新iframe与页面加载几乎不一样，也不会重置需要重置的所有内容

内容更改后，我尝试在

IFRAME.contentWindow

上调用

reload（true）

，但似乎没有任何帮助

我是否应该以不同的方式更新

IFRAME

，如果不是，是否有方法重置更新之间的状态

---

谢谢。

我替换了之前的代码，该代码部分工作：

var iframe = document.getElementById('output_frame');
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html_content);
iframe.contentWindow.document.close();

有了这段代码，一切都按预期进行了。谢谢@CBroe

// remove old frame
var old_iframe = document.getElementById('output_frame');
old_iframe.parentNode.removeChild(old_iframe);

// create new one - CSS takes care of position, size etc.
var new_iframe = document.createElement('iframe');
new_iframe.id = "output_frame";
new_iframe.frameBorder = 0;

// update the contents
document.body.appendChild(new_iframe);
new_iframe.contentWindow.document.open()
new_iframe.contentWindow.document.write(html_content);
new_iframe.contentWindow.document.close();

---

这似乎有点慢，但现在，我加载的任何JavaScript页面都能按预期工作。

最简单的解决方法可能是用新的元素替换

iframe

元素本身……这样可以消除任何“工件”这可能会保留以前迭代中的窗口实例。谢谢你CBroe-我没有考虑过这种方法，但快速测试表明它可能会工作。看起来速度要慢得多，输出中的JavaScript鼠标功能不再工作，但如果我更好地管理IFRAME的生命周期，这可能会得到修复。今晚我会更深入地研究这个问题，如果一切顺利的话，我会用马克作为答案。非常感谢。