应使用 blob url 替代 document.write() 实现 iframe 预览,因其每次加载全新独立文档上下文,彻底避免 const/let 变量重复声明错误,并具备跨域隔离与良好兼容性。

能做,但别用 document.write() 初始化可编辑 iframe —— 它会破坏 JS 执行环境,二次编辑时直接报 Identifier has already been declared。
怎么让 iframe 变成可编辑区域
核心是两步:设 designMode = "on",再写入初始 HTML 结构。注意不能跳过 open() 和 close(),否则内容可能不渲染或样式丢失。
-
designMode必须在 iframe 的contentDocument上设置,不是 iframe 元素本身 - 兼容写法:用
iframe.contentWindow.document而非iframe.contentDocument(IE8– 会挂) - 初始
write()内容里要包含完整,否则部分浏览器(如 Safari)会忽略<style></style>或 script - 写完必须调用
close(),否则 iframe 会卡在“loading”状态,execCommand失效
为什么 execCommand 有时不生效
常见原因是 iframe 没获得焦点,或执行时文档还没 ready。不是所有命令都支持所有浏览器(比如 "insertUnorderedList" 在 Firefox 中需先选中段落)。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- 每次调用前确保
iframe.contentWindow.focus() - 命令参数顺序固定:
execCommand(command, showUI, value),其中showUI一般传false,value对"fontName"是字体名,对"createLink"是 URL -
"formatBlock"要传完整标签字符串,例如"<h2>"</h2>,不是"h2" - Chrome 90+ 已废弃
execCommand,但目前仍可用;新项目建议转向ContentEditable+SelectionAPI 手动操作 DOM
预览 iframe 怎么避免 JS 变量重复声明
用 document.write() 动态重写预览 iframe,会导致旧脚本未卸载、新脚本重复声明 const/let 变量 —— 这是硬伤,不是 bug。
- ✅ 正确做法:用
Blob构造 URL,赋给iframe.src,每次预览都是全新上下文 -
srcdoc看似简单,但不支持script标签的defer/async,且 Safari 对内联 CSS 的解析有延迟 - 务必加
sandbox="allow-scripts allow-same-origin",否则 Blob URL 下 script 不执行 - 记得在下次更新前调用
URL.revokeObjectURL(oldUrl),否则内存泄漏
真正难的不是初始化 iframe,而是处理光标位置、粘贴行为、undo 栈和跨浏览器 selection 差异 —— 这些没标准 API,得靠反复测 Edge/Firefox/Chrome 的 getSelection() 返回值结构。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










