srcdoc 必须提供完整 HTML 文档结构（含 DOCTYPE、html、head、body），否则 Safari/Chrome 渲染异常；它不是 innerHTML 替代品，需严格遵循 HTML 标准解析流程。
srcdoc 必须提供完整 HTML 文档结构，否则 Safari 和 Chrome 渲染异常
只传 "<div>hello" 这类片段，iframe 会空白——<code>srcdoc 不是 innerHTML 替代品，它要求整份文档源码。浏览器按标准 HTML 解析流程处理该字符串，缺 <!DOCTYPE html>、<html>、<head>、<body> 中任意一个，就可能跳过渲染或静默失败。
常见错误写法：<iframe srcdoc="<div>test</div>" sandbox="allow-scripts"></iframe>
正确最小结构示例：
<iframe srcdoc="<!DOCTYPE html><html><head><title>Preview</title><style>body{margin:0;font-size:14px;}</style></head><body><div>hello</div></body></html>" sandbox="allow-scripts"></iframe>
-
<title>非强制但建议保留，缺失会影响调试体验和部分 SEO 工具识别 - 所有双引号需转义或外层用单引号包裹，避免属性解析中断
- 内联 CSS 必须用
<style>，不能靠父页样式穿透
srcdoc + sandbox 是默认隔离组合，但空 sandbox="" 会导致 net::ERR_BLOCKED_BY_RESPONSE
sandbox="" 不是“最小权限”，而是彻底阻断内容加载：Network 面板显示 net::ERR_BLOCKED_BY_RESPONSE，iframe 白屏，控制台无报错。这是浏览器底层拦截，连 HTML 解析都不启动。
立即学习“前端免费学习笔记（深入）”；
真正可用的起点是显式声明权限，例如：sandbox="allow-scripts" 才允许脚本执行；sandbox="allow-scripts allow-forms" 才支持表单提交。
- 即使内容完全来自你拼接，也必须配
sandbox，否则 XSS 风险直线上升 -
allow-same-origin在srcdoc场景下毫无意义——srcdoc内容天然为唯一源（about:srcdoc），无法与父页同源，该 token 被浏览器静默忽略 - 若需通信，只能走
postMessage，且父页必须校验event.origin === 'null'（因为srcdociframe 的 origin 固定为null）
内联脚本在 srcdoc 中受限严重，DOM 操作需谨慎时机
srcdoc 里的 JS 运行在独立浏览上下文，无法访问 window.parent、document.cookie 或任何父页变量。常见踩坑点包括：
-
document.write()直接失败，不报错但无效果 - 内联事件如
onclick="alert(1)"默认被 sandbox 禁用，即使开了allow-scripts也不生效，必须改用addEventListener - 脚本若操作
document.body，需确保 DOM 已挂载——推荐放在<body>底部，或包装在DOMContentLoaded回调中 - 动态更新内容时，不能 patch 部分 HTML，必须重新赋值整个
srcdoc字符串
IE 完全不支持 srcdoc，fallback 必须用 data URL
IE 会忽略 srcdoc 属性，直接走 src。因此 fallback 方案不是“备用 HTML”，而是把相同内容编码为 data:text/html;base64 URL。
示例写法：
<iframe src="data:text/html;base64,PGh0bWw+PGhlYWQ+PHRpdGxlPlByZXZpZXc8L3RpdGxlPjwvaGVhZD48Ym9keT48ZGl2PmhlbGxvPC9kaXY+PC9ib2R5PjwvaHRtbD4=" srcdoc="<!DOCTYPE html><html><head><title>Preview</title></head><body><div>hello</div></body></html>" sandbox="allow-scripts"></iframe>
- Base64 编码需确保 UTF-8 原始内容，中文等字符容易因编码错误导致乱码
- data URL 有长度限制（约 2MB），超长内容仍需走外部
src，但会失去srcdoc的隔离优势 - 现代项目若已放弃 IE 支持，可省略
src，但团队协作或遗留系统中仍需保留 fallback
event.origin === 'null' 不是可选项，是唯一可信标识。
