srcdoc必须提供完整html文档结构，含doctype、html、head、body，否则如仅写"hello"将渲染空白；需转义引号、内联css/js、配合sandbox使用，ie不支持需fallback。
srcdoc 必须是完整 HTML 文档，不是 HTML 片段
直接写 srcdoc="<div>hello" 就会空白——这不是 bug，是规范要求。浏览器把 <code>srcdoc 值当整个 HTML 文件解析，缺 、<code>、 或 都可能渲染失败，尤其 Safari 更严格。
常见错误现象：iframe 显示为空白，控制台无报错，检查 DOM 发现 srcdoc 只有一段 div；修复方式就是补全结构：
srcdoc="<title>Preview</title> <p>Hello</p>"- 即使只渲染一行文字，也得带
；不写<title></title>不影响显示，但缺失可能干扰调试或 SEO - 所有双引号必须转义：若内联样式含
style="color:red"，外层属性建议用单引号定义，或写成style="color:red"
srcdoc 里不能用外部资源，JS/CSS 必须内联
<script src="xxx.js"></script> 或 <link href="style.css"> 在 srcdoc 中完全无效——它不发请求，也不加载相对路径资源。哪怕你把文件放在同目录下，也不会被读取。
使用场景集中在小而隔离的交互片段，比如 Markdown 实时预览、按钮计数器、代码片段演示：
- CSS 必须用
<style></style>标签写在里，不能靠父页样式穿透 - JS 要么放
底部，要么包裹在DOMContentLoaded回调里，避免操作未挂载节点 - 别用
document.write()或尝试修改contentDocument——srcdoc加载后文档即锁定，动态写入会失败 - 每次更新内容都得重新赋值整个
srcdoc字符串，不是 patch 部分 DOM
sandbox 是强制项，不配等于开窗放贼
srcdoc 默认同源（哪怕内容来自用户输入），不加 sandbox 就等于主动开放脚本执行、表单提交、弹窗、自动播放等全部权限。哪怕只是渲染一个带点击计数的按钮，也得设最小权限。
安全底线：
- 最保守写法：
sandbox=""（空值），禁用脚本、插件、表单、弹窗、导航等全部能力 - 真需要 JS 执行时，只加
sandbox="allow-scripts" - 如需父子通信，额外加
allow-top-navigation（注意：不是allow-same-origin） - 绝对禁止
sandbox="allow-same-origin"—— 它解除同源限制，恶意脚本可读取父页 DOM，哪怕内容是你自己拼的，混入用户输入就危险
IE 不支持 srcdoc，fallback 必须显式提供
Chrome ≥20、Firefox ≥25、Safari ≥6、Edge ≥79 支持 srcdoc；IE 完全不识别该属性，会忽略，导致 iframe 空白。不能靠特性检测兜底，因为 'srcdoc' in document.createElement('iframe') 在 IE 返回 true，但实际不生效。
可靠 fallback 方式只有两种：
- 同时设置
src和srcdoc：现代浏览器优先用srcdoc，IE 自动降级到src - 用
data:text/html;charset=utf-8;base64,编码后赋给src，但要注意 URL 长度限制（部分浏览器限约 2MB）和中文编码问题 - 别依赖
seamless属性——它已被废弃，且无实际兼容性价值
真正容易被忽略的是：srcdoc 不是通用渲染器，它只适合“小、快、隔离”的场景。超过几 KB 的 HTML 字符串，性能和可维护性就开始打折扣；复杂交互建议用 Web Component 或 Shadow DOM 替代。
