srcdoc必须是完整HTML文档，需包含DOCTYPE、html、head、body结构，且双引号须转义或外层用单引号包裹；script/link标签无效，CSS/JS须内联；sandbox为必需安全配置；IE完全不支持，须提供src降级。
srcdoc必须是完整HTML文档，不是任意片段
直接写 srcdoc="<div>Hello</div>" 会出问题：Safari 显示空白，Chrome 渲染异常，Firefox 行为不一致。浏览器把 srcdoc 值当整个 HTML 文件解析，缺 <html>、<head>、<body> 就不可靠。
- ✅ 正确结构：
srcdoc="<!DOCTYPE html><html><head><title>Preview</title></head><body><div>Hello</div></body></html>" -
<title>虽非强制，但缺失时旧版 Safari 可能拒绝渲染 - 不要依赖浏览器自动补全 —— Chrome 有时“帮忙”，Safari 和 Edge 更严格
- 未闭合标签（如
<div>hello）会导致后续内容不解析
双引号、CSS 和 JS 必须内联且转义
你在 srcdoc 字符串里写的任何双引号，比如 style="color:red"，都会和外层 HTML 属性的双引号冲突。不处理就会截断字符串，iframe 空白无报错。
- 推荐用单引号包裹整个属性：
srcdoc='<div style="color:red">OK</div>' - 或对双引号实体转义：
srcdoc="<div style="color:red">OK</div>" -
<script src="">和<link href="">在srcdoc中完全失效，必须把 JS 和 CSS 写进字符串里 - CSS 推荐用
<style>标签内联；JS 放在<body>底部，或包装在DOMContentLoaded里，避免操作未挂载的节点
sandbox 是必选项，不是可选配置
没加 sandbox 的 srcdoc 相当于裸奔：脚本可执行、表单可提交、window.open() 可弹窗、甚至能尝试修改 top.location。哪怕内容是你自己拼出来的，只要含用户输入（比如富文本编辑器预览），XSS 风险就真实存在。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 最简安全起点：
sandbox=""—— 完全禁用脚本、表单、弹窗、存储访问 - 需要运行 JS？用
sandbox="allow-scripts"，但绝不要加allow-same-origin，否则iframe.contentDocument能读取父页 DOM - 若需调用父页方法，只能通过
window.parent.postMessage()，不能依赖window.parent.xxx
IE 完全不支持，动态更新会重载整个上下文
IE（包括 IE11）完全忽略 srcdoc 属性，既不报错也不 fallback，结果就是 iframe 空白。这不是兼容性问题，是彻底不识别。
立即学习“前端免费学习笔记（深入）”；
- 必须提供降级路径：同时设
src和srcdoc，现代浏览器优先用srcdoc，IE 回退到src（比如指向一个静态 HTML 文件） - 执行
iframe.srcdoc = newHtml会重载 iframe，JS 状态全丢 —— 已绑定的事件监听器、定时器、正在执行的函数全部销毁 - 不要用
srcdoc做高频更新（如实时 Markdown 预览每键触发）；改用iframe.contentDocument.write() + document.close()更轻量（但需确保同源且无sandbox限制）
