+
96
-

同一个iframe多次write包含three的html为啥报错不显示Failed to execute 'write' on 'Document': Identifier 'scene' has a

同一个iframe多次write包含three的html为啥报错不显示Failed to execute 'write' on 'Document': Identifier 'scene' has already been declare,这个怎么解决?

const iframe = document.getElementById('previewFrame');
if(iframe) {
const doc = iframe.contentDocument || iframe.contentWindow.document;
doc.open();
doc.write(html);
doc.close();
}


网友回复

+
19
-

这个问题出现的核心原因是:浏览器的 Global Scope(全局作用域)没有被彻底重置

尽管你使用了 doc.open() 和 doc.write(),但这仅仅是清空了 iframe 的 DOM 结构。在某些现代浏览器环境下,复用同一个 iframe 元素时,其挂载的 Window 对象(以及挂载在上面的全局变量)可能并没有被立即销毁或完全重置。

当你第一次运行代码时:const scene = ... 在 iframe 的全局作用域中声明了 scene。

当你第二次运行代码(没有销毁 iframe 标签,只是重写内容)时:浏览器试图再次在同一个作用域执行 const scene = ...。由于 const 和 let 不允许在同一作用域下重复声明(Re-declaration),所以抛出了 SyntaxError。

解决方案

要解决这个问题,最稳妥的方法不是重写 iframe 的内容,而是彻底销毁旧的 iframe,并创建一个新的 iframe。这样可以保证拥有一个全新的、纯净的 Window 上下文。

既然你使用了 nextTick,我推测你是在使用 Vue (或类似框架)。以下是几种解决方案:

方案一:利用 Vue 的 :key 强制重新渲染 (推荐)

这是最简单且最符合 Vue 逻辑的方法。给 iframe 绑定一个唯一的 key。每次你需要更新代码时,改变这个 key 的值。Vue 会检测到 key 变化,从而自动销毁旧组件(iframe),并挂载一个新的 iframe。

HTML:

<!-- 给 iframe 绑定一个动态的 key -->
<iframe id="previewFrame" :key="iframeKey"></iframe>

JavaScript:

data() {
  return {
    iframeKey: 0, // 初...

点击查看剩余70%

我知道答案,我要回答