本文介绍解决 `iframe.document.write()` 导致 javascript 变量重复声明错误的根本方案，推荐使用 blob url 方式替代 `document.write`，兼顾浏览器兼容性、安全性与执行稳定性。
在构建 HTML/CSS/JS 实时编辑器时，直接通过 iframe.contentDocument.write() 动态重写 iframe 内容看似简洁，但存在严重缺陷：每次调用 write() 会清空并重建整个文档上下文，导致 <script> 中的 const/let 变量在二次编辑时触发 <strong>“Identifier has already been declared” 错误——这是因为旧脚本未被彻底卸载，而新脚本又尝试重复声明同名块级作用域变量。</script>
✅ 推荐方案：Blob URL + iframe.src
相比 document.write() 或 srcdoc，Blob URL 是更健壮、更安全的替代方案：
- ✅ 无变量污染：每次预览均加载全新独立文档上下文，JavaScript 执行环境完全隔离，杜绝重复声明；
- ✅ 跨域隔离：Blob URL 具有唯一 origin（blob: 协议），天然阻止脚本访问父页面 DOM 或全局变量，提升安全性；
- ✅ 广泛兼容：支持所有现代浏览器（Chrome 8+、Firefox 6+、Edge 13+、Safari 7.1+），无需降级 fallback；
- ✅ 可精准控制生命周期：配合 URL.createObjectURL() 和 URL.revokeObjectURL()，避免内存泄漏。
? 实现代码（含防抖优化）
<textarea id="editor" placeholder="输入 HTML/CSS/JS..."></textarea> <iframe id="preview" src="" sandbox="allow-scripts allow-same-origin"></iframe>
#editor, #preview {
width: 100%;
height: 400px;
border: 1px solid #ccc;
font-family: monospace;
}const textarea = document.getElementById('editor');
const iframe = document.getElementById('preview');
// 防抖函数：避免高频输入触发过多预览
function debounce(func, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
function preview() {
const html = textarea.value.trim() || '<!doctype html><html><body><p>No content</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1455" title="Pebblely"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680147771072.jpg" alt="Pebblely" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1455" title="Pebblely">Pebblely</a>
<p>AI产品图精美背景添加</p>
</div>
<a href="/ai/1455" title="Pebblely" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></body></html>';
// 创建 Blob 并生成 URL
const blob = new Blob([html], { type: 'text/html' });
const url = URL.createObjectURL(blob);
// 加载完成后立即释放 URL，防止内存泄漏
iframe.onload = () => URL.revokeObjectURL(url);
iframe.src = url;
}
const debouncedPreview = debounce(preview, 300);
textarea.addEventListener('input', debouncedPreview);
// 初始预览
preview();⚠️ 关键注意事项：必须为 添加 sandbox="allow-scripts allow-same-origin" 属性，否则 Blob 页面中脚本将被禁用（allow-same-origin 使 iframe 能正常解析 document 对象，allow-scripts 启用 JS 执行）；若用户输入含恶意脚本（如 fetch() 外链、localStorage 操作），其作用域仅限于 iframe 自身，无法窃取主站 Cookie 或 DOM 数据，安全性远高于 srcdoc；不建议使用 srcdoc：虽语法简洁（iframe.srcdoc = html），但在 Safari 旧版本及部分 iOS 浏览器中存在兼容性问题，且无法设置 sandbox 策略，存在潜在 XSS 风险。
? 总结
| 方案 | 变量冲突 | 安全性 | 兼容性 | 内存管理 |
|---|---|---|---|---|
| document.write() | ❌ 严重（重复声明） | ❌ 无隔离 | ✅ | ❌ 易泄漏 |
| srcdoc | ✅ | ⚠️ 依赖内容过滤 | ⚠️ Safari/iOS 限制 | ✅ |
| Blob URL | ✅ | ✅ 原生沙箱隔离 | ✅ | ✅（配合 revokeObjectURL） |
结论：优先采用 Blob URL 方案。它从根本上规避了执行上下文复用带来的 JS 错误，同时以标准化方式实现跨域隔离与资源回收，是构建生产级 HTML 编辑器预览功能的可靠基石。
立即学习“前端免费学习笔记（深入）”；
