srcdoc 必须是完整 html 文档，需包含 doctype 和 html/head/body 结构，双引号需转义，css/js 必须内联，应配 sandbox 属性防 xss，动态更新会重载 iframe，ie 完全不支持需 fallback。
srcdoc 必须是完整 HTML 文档，不是任意 HTML 片段
直接写 srcdoc="<div>Hello</div>" 会导致 Safari 空白、Chrome 渲染异常，因为 srcdoc 不接受“片段”，它等价于整个 iframe 的源码。浏览器会尝试解析为完整文档，但缺少 、、 时行为不可靠。
- 必须包含
（推荐）或至少 <code><title>X</title>... -
<title></title>标签虽非强制，但缺失时部分旧版 Safari 可能拒绝渲染 - 所有双引号需转义：若内联
style="color:red"，外层属性要用单引号包裹，或写成style="color:red" - 禁止
<script src="..."></script>或<link href="...">—— 外部资源全部失效，CSS/JS 必须内联
不配 sandbox 就等于裸奔，哪怕内容来自自己
srcdoc 默认不带任何安全限制，脚本可执行、表单可提交、window.open() 可弹窗、甚至能尝试修改 top.location。即使 HTML 字符串由你拼接生成，一旦含用户输入（比如富文本编辑器预览），就存在 XSS 风险。
- 最简安全起点：
sandbox=""—— 完全禁用脚本、表单、弹窗、存储访问 - 仅需展示静态内容：保留
sandbox=""，不加任何allow-token - 需运行 JS（如按钮交互）：
sandbox="allow-scripts"，但不要加allow-same-origin，否则iframe.contentDocument可读取父页 DOM - 若要调用父页方法，必须用
window.parent.postMessage()，不能依赖直接引用
动态更新 srcdoc 会重载 iframe，JS 状态全丢
执行 iframe.srcdoc = newHtml 看似简单，实则触发 iframe 全量重载：已绑定的事件监听器、定时器、console 输出、正在执行的函数全部销毁。这不是“刷新页面”，而是销毁并重建整个浏览上下文。
- 不要用
srcdoc做高频更新（如实时 Markdown 预览每键触发）—— 改用iframe.contentDocument.write()+document.close()更轻量（但需确保同源且无 sandbox 限制） - 若必须用
srcdoc更新，每次都要重新注入内联 JS，并靠postMessage同步状态 - 无法通过
iframe.contentWindow持久保存变量，重载后该对象指向新窗口实例 - 调试时注意：控制台里看到的
console.log是旧上下文的残留输出，新脚本需重新打点
IE 完全不支持 srcdoc，降级路径不是可选项
IE（包括 IE11）完全忽略 srcdoc 属性，既不报错也不 fallback，结果就是空白 iframe。仅靠 'srcdoc' in document.createElement('iframe') 判断不可靠，因为 IE 下该属性存在但无效。
- 必须同时设置
src和srcdoc：<iframe srcdoc="..." src="fallback.html"></iframe> - fallback 页面（如
fallback.html）应与srcdoc内容语义一致，且也启用sandbox - 若无法提供静态 fallback 文件，可用 data URL：
src="data:text/html;charset=utf-8,20html>..."，但注意 URL 长度限制（通常 ≤ 2MB） - 企业内网仍存 IE 流量时，别跳过这步 —— 空白 iframe 比慢一点更难排查
srcdoc 赋值，背后全是边界条件。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
