iframe的document.write导致JavaScript变量重复声明报错问题求解

API 探路者

2026-7-15

解决iframe预览HTML编辑器中const/let重复声明错误的最优方案

问题根源

你当前的实现使用document.write()重写iframe内容时，iframe的**全局执行上下文（window对象）**并未被完全重置——之前脚本中声明的全局const/let变量会残留。当你再次写入包含重复变量声明的代码时，就会触发Identifier has already been declared错误。

最优方案：使用`srcdoc`属性替换内容

直接通过iframe的srcdoc属性设置HTML内容，每次修改都会让iframe加载全新的文档实例，全局上下文完全重置，从根源上避免旧变量残留的问题。

修改你的JavaScript代码：

const textarea = document.querySelector('textarea');
const iframe = document.querySelector('iframe');

function preview() {
  // 直接设置srcdoc，替代document.write流程
  iframe.srcdoc = textarea.value;
}

textarea.addEventListener('input', preview);

兼容旧浏览器的备选方案：Blob URL

如果需要兼容不支持srcdoc的旧浏览器，可以将内容转为Blob URL，同样能实现全新文档加载：

const textarea = document.querySelector('textarea');
const iframe = document.querySelector('iframe');

function preview() {
  const blob = new Blob([textarea.value], { type: 'text/html' });
  const blobUrl = URL.createObjectURL(blob);
  iframe.src = blobUrl;
  
  // 页面卸载时释放Blob URL，避免内存泄漏
  window.addEventListener('beforeunload', () => {
    URL.revokeObjectURL(blobUrl);
  });
}

textarea.addEventListener('input', preview);