srcdoc 必须是完整合法的 HTML 文档，含 DOCTYPE、html、head、body 结构；双引号需转义或外层用单引号；CSS/JS 必须内联；必须设置 sandbox 保障安全；IE 不支持需降级处理。
srcdoc 不是用来“嵌套复杂 HTML 代码”的快捷方式，它只接受一个完整、合法、自包含的 HTML 文档字符串 —— 复杂不复杂不重要，结构对不对才致命。
srcdoc 必须是完整 HTML 文档，不是任意片段
常见错误是把富文本编辑器导出的 <div>...</div> 直接塞进 srcdoc，结果 Safari 空白、Chrome 渲染错乱、Firefox 行为飘忽。因为浏览器把它当整个 HTML 文件解析，缺 <html>、<head>、<body> 就没法定位上下文。
- ✅ 正确结构必须含：
<!DOCTYPE html><html><head><title>X</title></head><body>...</body></html> -
<title>虽非强制，但旧版 Safari 缺失时可能拒渲染 - 未闭合标签（如
<div>hello）会导致后续内容被丢弃，不是警告，是静默截断 - 不要依赖 Chrome 的自动补全 —— Edge 和 Safari 更严格，行为不可移植
双引号、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中完全失效，必须把 CSS 放<style>里，JS 放<script>标签中，且写在<body>底部或包装进DOMContentLoaded - JS 操作 DOM 前必须确认节点已挂载，否则
document.getElementById(...)返回null
sandbox 是硬性要求，不是可选项
没加 sandbox 的 srcdoc 相当于裸奔：脚本能执行、表单能提交、window.open() 能弹窗、甚至尝试修改 top.location。哪怕内容是你自己拼的，只要含用户输入（比如 Markdown 预览），XSS 风险就真实存在。
立即学习“前端免费学习笔记（深入）”；
- 最简安全起点：
sandbox=""—— 完全禁用脚本、表单、弹窗、存储访问 - 需要运行 JS？用
sandbox="allow-scripts"，但绝不要加allow-same-origin，否则iframe.contentDocument可读取父页 DOM - 若需调用父页方法，只能走
window.parent.postMessage()，不能依赖window.parent.xxx - 不配
sandbox就等于默认开启全部权限，现代浏览器不会帮你兜底
IE 不支持，动态更新会重载整个 iframe 上下文
IE（包括 IE11）完全忽略 srcdoc 属性，既不报错也不 fallback，结果就是 iframe 空白 —— 这不是兼容性问题，是彻底不识别。
- 必须提供降级路径：同时设
src和srcdoc，现代浏览器优先用srcdoc，IE 回退到src（例如指向一个静态 HTML 文件） - 执行
iframe.srcdoc = newHtml会触发全量重载：所有事件监听器、定时器、正在执行的函数、console.log输出全部销毁 - 不要用
srcdoc做高频更新（如实时 Markdown 预览每键触发）—— 改用iframe.contentDocument.write() + document.close()更轻量（但需确保同源且无sandbox限制） - 无法通过
iframe.contentWindow持久保存变量，重载后该对象指向新窗口实例
真正麻烦的不是写多复杂的 HTML，而是把结构、引号、沙箱、降级这四件事全做对 —— 少一个，要么空白，要么危险，要么只在你本地 Chrome 里“看起来正常”。
