srcdoc 必须是完整 HTML 文档，需包含 <!DOCTYPE html>、<html>、<head>、<body>，且所有双引号须转义；禁止外部资源，JS/CSS 必须内联；sandbox 不能为空，推荐 sandbox="" 或 sandbox="allow-scripts"；IE 不支持，需用 src 降级。
srcdoc 不接受 HTML 片段，只认完整文档
直接把 <div>Hello</div> 丢进 srcdoc 属性，结果是 Safari 空白、Chrome 渲染异常、Firefox 行为不一致 —— 因为 srcdoc 的值被浏览器当作一个完整的 HTML 文件源码来解析，不是“塞进 <body> 里就行”的片段。缺 <html>、<head>、<body> 中任意一个，就等于交了一份语法不全的 HTML 文件给浏览器，它不会帮你补全，尤其在 Safari 和 Edge 上更严格。
-
srcdoc必须以<!DOCTYPE html>开头（不能省略） -
<html>、<head>、<body>三者必须显式存在，顺序不能乱 -
<title>虽非强制，但缺失时旧版 Safari 可能拒绝渲染，建议保留 - 所有双引号需转义：比如内联
style="color:red"，外层用单引号写srcdoc='<div style="color:red">...</div>'，或统一用"
内联 CSS 和 JS 必须手写进文档结构里
srcdoc 禁止任何外部资源加载，<link href="..."> 和 <script src="..."> 全部失效，连相对路径都不行。想加样式或逻辑，只能靠内联。
- CSS 必须包裹在
<style></style>里，写在<head>中 - JS 必须用
<script></script>写在<body>底部，或包裹在DOMContentLoaded回调里，避免 DOM 节点未挂载就执行 - 不要用
document.write()或尝试修改contentDocument——srcdoc加载后文档即锁定，动态写入会失败 - JS 运行在完全隔离的上下文中，访问不到父页面的
window、document，通信只能靠postMessage
sandbox 是必选项，不是可选配置
不加 sandbox，等于主动开放脚本执行、表单提交、弹窗、插件加载等全部权限，哪怕内容是你自己拼的，一旦混入用户输入（比如预览 Markdown 渲染结果），XSS 风险立刻拉满。
- 最安全起点是
sandbox=""（空值），此时脚本、插件、表单、弹窗全部禁用 - 真需要执行 JS，才加
sandbox="allow-scripts" - 如需与父页通信，额外加
allow-top-navigation（注意不是allow-same-origin） - 绝对避免
sandbox="allow-same-origin"—— 它会让恶意脚本读取父页 DOM，解除同源限制
IE 不支持 srcdoc，fallback 必须做
IE 完全无视 srcdoc，所以不能只写 <iframe srcdoc="...">。得同时提供 src 作为降级路径，让 IE 自动 fallback 到它。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
src="data:text/html;base64,..."生成 base64 编码的 HTML 字符串作为 fallback - 或者用
Blob+URL.createObjectURL()构造 blob URL（兼容性更好） - Vue/React 中动态赋值时，注意
srcdoc是字符串属性，React 用srcDoc（驼峰），Vue 用:srcdoc绑定即可 - 每次更新内容都应重新赋值整个
srcdoc字符串，而不是 patch 部分内容 —— 它会触发 iframe 重载
