同一个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();
}网友回复
这个问题出现的核心原因是:浏览器的 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%
如何破解绕开seedance2.0真人照片生成视频 限制?
python有哪些算法可以将视频中的每个帧图片去除指定区域水印合成新的视频?
iphone的激光雷达数据能否实时传输到three三维空间中?
豆包sora等ai视频生成大模型生成的视频水印如何去除?
python如何实现在电脑上拨号打电话给手机?
具身机器人与人形机器人区别?
nodejs如何将一个完整的js代码文件切割成不同的部分混淆后动态加载进入html运行?
为啥windows.onerror捕获js错误是这样的{"message":"Script error.","source":"","lineno":0,"colno":0,"stack":null,
2026年ai将全面接管编程?
WebMCP是干啥的?


