srcdoc属性必须配合iframe使用，是其内联html内容的专属属性，完全替代src加载远程页面，需完整html结构、正确转义字符，并依赖sandbox显式授权功能，修改后需重建iframe才能刷新。
srcdoc 属性必须配合 iframe 使用
srcdoc 不是独立标签或 JS API，它只是 iframe 的一个 HTML 属性，用于直接内联 HTML 内容。浏览器会把它的值当作完整的 HTML 文档来解析和渲染，**完全替代 src 加载的远程页面**。
常见错误是把它写在 div 或 section 上，或者以为能用 JS 动态赋值后立刻生效（实际需重载 iframe）：
- ❌
<div srcdoc="<p>hello</p>"></div> - ❌
document.querySelector('iframe').srcdoc = '<p>test</p>';（不会触发重新渲染） - ✅ 正确写法：
<iframe srcdoc="<p>hello</p>" sandbox="allow-scripts"></iframe>
srcdoc 的内容必须是完整、合法的 HTML 片段
浏览器对 srcdoc 的内容做严格解析：它会被当作一个独立文档处理，所以不能只写 <p>xxx</p>，而应包含 、、 结构（虽然某些简单场景省略也能显示，但行为不可靠）。
尤其注意字符转义 —— 因为 srcdoc 值本身在 HTML 属性里，双引号、小于号等必须 HTML 编码：
- ❌
<iframe srcdoc="<p onclick=" alert>click"></iframe>（属性值提前截断） - ✅ 应写成：
<iframe srcdoc="<p onclick=" alert>click"></iframe> - ✅ 更稳妥的做法：用 JS 动态创建并设置
srcdoc，避免手动编码：const iframe = document.createElement('iframe');<br>iframe.srcdoc = '<p>Hello</p>';<br>document.body.appendChild(iframe);
不加 sandbox 就没有脚本、样式、表单等能力
srcdoc 默认运行在极其受限的沙箱环境中，相当于启用了 sandbox=""（即全禁用）。这意味着：<script></script> 不执行、<style></style> 被忽略、onclick 无效、fetch 报错、表单无法提交。
如需启用某项能力，必须显式声明对应 sandbox 权限：
-
sandbox="allow-scripts"：允许运行脚本（但仍禁止 DOM 访问父页面） -
sandbox="allow-scripts allow-same-origin"：允许脚本 + 同源访问（⚠️ 这会削弱隔离性，慎用） -
sandbox="allow-scripts allow-popups"：允许脚本 +window.open等弹窗 - 不加
sandbox属性？浏览器会自动补上空值，等价于全禁用
srcdoc 和 src 互斥，且无法通过 JS 修改后自动刷新
一旦 iframe 已加载（无论来自 src 还是 srcdoc），再改 srcdoc 属性不会触发重渲染。这是最容易被忽略的实操陷阱。
想动态更新内容，只有两个可靠方式：
- 移除旧
iframe，新建一个并设置新srcdoc - 用
src指向一个本地data:URL（例如data:text/html;charset=utf-8,<p>new</p>），这样可直接赋值src触发刷新 - 不要依赖
iframe.contentDocument：在srcdoc场景下，该属性可能为null，尤其未设sandbox="allow-same-origin"时
复杂点在于：你得自己管理 iframe 生命周期，而不是幻想“改个属性就刷新”。很多调试失败，其实卡在这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
