designMode需在iframe加载完成且同源时设置，否则无效；必须用onload监听、延迟聚焦body、重置样式并禁用右键菜单。
designMode 确实能快速让 iframe 变成可编辑区域，但它只对整个文档生效，且必须在 iframe 加载完成、文档可访问后设置，否则无效。
iframe 的 contentDocument 必须就绪才能设 designMode
常见错误是 DOM 插入 iframe 后立刻操作：iframe.contentDocument 还是 null，或其 document 尚未初始化。浏览器不会报错，但 designMode = 'on' 完全不生效。
- 用
iframe.onload是最稳妥的时机（注意：不是DOMContentLoaded，因为 iframe 内部文档需完整加载） - 如果 iframe 是空的（
src="about:blank"），可在load后直接写入初始 HTML，再设designMode - 若 iframe 有跨域
src，contentDocument不可访问，designMode无法设置——这是硬性限制，无绕过方案
designMode = 'on' 后需要显式聚焦才能输入
开启编辑模式本身不触发焦点，用户点击空白处可能无响应，键盘输入也不生效。必须手动调用 focus()，且推荐在 setTimeout 中延迟执行，确保渲染队列清空：
iframe.onload = () => {
const doc = iframe.contentDocument;
if (doc) {
doc.designMode = 'on';
// 延迟聚焦，避免部分浏览器失焦
setTimeout(() => doc.body.focus(), 0);
}
};
不加 setTimeout 在 Safari 和旧版 Edge 中容易出现首次聚焦失败；doc.body 聚焦比 doc 更可靠，因 body 是实际编辑容器。
立即学习“前端免费学习笔记（深入）”；
样式与默认行为需主动重置，否则体验割裂
启用 designMode 后，浏览器会套用默认编辑样式（如选区蓝框、光标粗细、段落间距），和页面 CSS 冲突明显。关键要处理：
-
iframe自身需设border: none和固定尺寸，否则拖动/缩放不可控 - 在 iframe 文档内注入基础样式，例如：
body { margin: 0; padding: 8px; font-family: -apple-system, sans-serif; } - 禁用右键菜单干扰：
doc.addEventListener('contextmenu', e => e.preventDefault()) - 某些浏览器（如 Firefox）默认开启拼写检查，可加
spellcheck="false"到body或根元素
真正麻烦的是内容初始化时机和跨域边界——designMode 看似一行代码，但漏掉 onload 或误判同源性，就会卡在“看起来没反应”上，而控制台连错误都不会抛。
