srcdoc必须是完整html文档，含doctype、html、head、body结构，双引号需转义，css/js须内联，必须配sandbox防xss，ie不支持需fallback。
srcdoc 必须是完整 HTML 文档，不是任意片段
直接写 srcdoc="<div>Hello</div>" 会出问题：Safari 显示空白，Chrome 渲染异常，Firefox 行为不一致。因为 srcdoc 不接受 HTML 片段，它等价于整个 iframe 的源码文件 —— 浏览器按完整文档解析，缺 、、 就不可靠。
- ✅ 正确结构：
srcdoc="<title>Preview</title> <div>Hello</div>" -
<title></title>虽非强制，但缺失时旧版 Safari 可能拒绝渲染 - 不要依赖浏览器自动补全 —— Chrome 有时会“帮忙”，但 Safari 和 Edge 更严格
- 未闭合标签（如
<div>hello）会导致后续内容不解析 <h3>双引号、CSS 和 JS 必须内联且转义</h3> <p>你在 <code>srcdoc字符串里写的任何双引号，比如style="color:red"，都会和外层 HTML 属性的双引号冲突。不处理就会截断字符串，iframe 空白无报错。- 推荐用单引号包裹整个属性：
srcdoc='<div style="color:red">OK</div>' - 或对双引号实体转义：
srcdoc="<div style="color:red">OK</div>" -
<script src="..."></script>和<link href="...">在srcdoc中完全失效，必须把 JS 和 CSS 写进字符串里 - CSS 推荐用
<style></style>标签内联；JS 放在底部，或包装在DOMContentLoaded里，避免操作未挂载的节点
sandbox 是必选项，不是可选配置
没加
sandbox的srcdoc相当于裸奔：脚本可执行、表单可提交、window.open()可弹窗、甚至能尝试修改top.location。哪怕内容是你自己拼出来的，只要含用户输入（比如富文本编辑器预览），XSS 风险就真实存在。- 最简安全起点：
sandbox=""—— 完全禁用脚本、表单、弹窗、存储访问 - 需要运行 JS？用
sandbox="allow-scripts"，但绝不要加allow-same-origin，否则iframe.contentDocument能读取父页 DOM - 若需调用父页方法，只能通过
window.parent.postMessage()，不能依赖window.parent.xxx - 不配
sandbox就等于默认开启全部权限，现代浏览器不会帮你兜底
IE 完全不支持，动态更新会重载整个上下文
IE（包括 IE11）完全忽略
srcdoc属性，既不报错也不 fallback，结果就是 iframe 空白。这不是兼容性问题，是彻底不识别。- 必须提供降级路径：同时设
src和srcdoc，现代浏览器优先用srcdoc，IE 回退到src（比如指向一个静态 HTML 文件） - 用 data URL 替代（
src="data:text/html;charset=utf-8;base64,..."）可行，但注意 URL 长度限制（部分浏览器约 2MB） -
iframe.srcdoc = newHtml看似简单，实则触发 iframe 全量重载：所有事件监听器、定时器、已执行函数全部销毁，contentWindow指向新实例 - 高频更新（如每键触发的 Markdown 预览）别用
srcdoc—— 改用iframe.contentDocument.write() + document.close()，但前提是同源且没开sandbox
<title></title>和sandbox，前者让 Safari 拒绝渲染，后者让整个隔离形同虚设。这两个点不是“建议”，是硬性门槛。 - 推荐用单引号包裹整个属性：
