Question

我正在制作一个简单的Web应用程序，动态创建一个包含HTML，JavaScript和CSS的网页。通过一个IFRAME中的一些基本用户界面，我让用户选择选项，然后每当另一个IFRAME中的内容发生变化时创建页面。我使用以下代码重建页面：

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

它非常适用于静态内容，但我还包括一堆第三方库，虽然功能提供在第一次创建页面时可以正常工作，但在后续更改中，它们会中断。例如，帧速率计数器从60hz左右开始，但在每次更改/更新周期后迅速上升。

当我将页面写入磁盘并正常加载时，一切都没问题。

我想这是因为以这种方式更新iframe与页面加载几乎不相同，并且不会重置所需的所有内容。

我在内容发生变化后尝试在reload(true)上调用IFRAME.contentWindow，但这似乎没有任何帮助。

我是否应该以不同的方式更新IFRAME，如果没有，是否有办法在更新之间重置状态。

谢谢。

Answer 1

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

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中动态更新JavaScript后重置状态

1 个答案: