srcdoc仅适用于iframe且必须配合sandbox使用，用于隔离环境中运行完全可控的无外部依赖HTML片段；默认禁用脚本，需sandbox="allow-scripts"启用；不支持相对路径、@import和外链资源；适合轻量静态UI块，IE及旧Edge不支持。
srcdoc 属性只适用于 iframe，且必须配合 sandbox 使用，否则多数浏览器会直接忽略它。它不是“替代 innerHTML 的懒人方案”，而是用于在隔离环境中运行一段**完全可控的、无外部依赖的 HTML 片段**。
为什么 srcdoc 不能直接写带 script 标签的 HTML
浏览器默认禁止 srcdoc 中的脚本执行，除非显式开启 sandbox 权限。比如下面这段会静默失败：
<iframe srcdoc="<p>Hello</p><script>alert(1)</script>"></iframe>
原因在于：没有 sandbox 属性时，srcdoc 内容被当作“无权限上下文”处理，所有脚本、表单提交、弹窗、插件调用均被禁用。
立即学习“前端免费学习笔记（深入）”；
- 要启用脚本，必须加
sandbox="allow-scripts" - 若还需
alert、console.log等 API，得额外加allow-modals（但 Chrome 已废弃该 token，实际无效） -
allow-same-origin不能和srcdoc共存——一旦加上，整个srcdoc就会被浏览器拒绝加载，并报错Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null')
srcdoc 和 data:text/html, URL 的区别
两者都能内联 HTML，但行为差异极大：
-
srcdoc是 DOM 层级的内联，内容解析发生在 iframe 创建时，不发网络请求，也不受 CSPscript-src限制（但受 sandbox 约束） -
data:text/html,...是 URL 协议，走完整资源加载流程，会触发 CSP 检查，且部分浏览器（如 Safari）对 data URL 长度有限制（约 2MB），超长会静默截断 -
srcdoc中的相对路径（如<img src="logo.png" alt="srcdoc属性直接写HTML代码_HTML内嵌微型文档技巧" >）全部失效——它没有 base URL，所有外部资源引用都会 404
哪些场景适合用 srcdoc
它真正适用的，是那些需要“轻量、隔离、可预测”的微型 UI 块，比如：
- 帮助提示浮层（纯 HTML + CSS，无 JS 交互）
- 静态免责声明或授权协议（仅文本与格式）
- 嵌入式 SVG 图标容器（
srcdoc可安全包裹<svg></svg>，且不会触发外链请求） - 作为
iframe的 fallback 内容占位（当src加载失败时，srcdoc自动生效）
注意：srcdoc 不支持 CSS @import，也不能用 <link rel="stylesheet">——所有样式必须内联写在 <style></style> 标签里，且不能跨域引用字体或图片。
IE 和旧版 Edge 完全不支持 srcdoc
如果你的用户群仍包含 IE11 或 Edge Legacy（版本号 ≤ 44），srcdoc 会直接被忽略，降级为显示空 iframe 或备用内容。此时必须用 JavaScript 动态检测：
const iframe = document.querySelector('iframe');<br>if (!('srcdoc' in iframe)) {<br> iframe.src = 'fallback.html';<br>}
别指望 srcdoc 做渐进增强——它要么全有，要么全无。而且 iOS Safari 在某些版本中会对过长的 srcdoc 字符串截断（实测超过 16KB 后开始不稳定），这点很容易被忽略。
