srcdoc是iframe内联html的专用属性，需提供完整合法文档结构（含doctype、html、head、body），引号须转义，禁外链资源，必须配合sandbox使用，ie不支持且需src降级。
srcdoc 不是用来“嵌入页面”的，它是让 <iframe></iframe> 直接渲染一段内联 HTML 字符串——不发请求、不依赖文件、默认隔离源。它不是 src 的简化写法，而是为「小、快、隔离」场景专设的通道。
srcdoc 必须是完整 HTML 文档结构
浏览器把 srcdoc 值当整个 HTML 文件解析，不是只塞进 。漏掉 、 或 ，Safari 可能空白，Chrome 可能自动补但行为不可靠。
- ✅ 正确写法：
srcdoc="<title>Test</title> <p>Hello</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>" - ❌ 错误写法：
srcdoc="<p>Hello</p>"（无文档结构，高概率不渲染） - 引号必须转义：若内联
style="color:red"，外层属性用单引号，或写成style="color:red" - 外部资源无效：
<script src="xxx.js"></script>和<link href="xxx.css">在srcdoc中不会加载
动态更新 srcdoc 会销毁 JS 上下文
执行 iframe.srcdoc = newHtml 等价于刷新 iframe：所有已运行脚本、定时器、事件监听器全部清空，console.log 输出中断，document 引用失效。
- 如果新内容含
<script></script>，它会在全新上下文中重新执行 - 脚本无法访问父页面变量（如
window.api），报ReferenceError——sandbox默认切断跨 frame 访问 - 想保留状态？别用
srcdoc动态重写，改用contentDocument+innerHTML（但需sandbox="allow-scripts allow-same-origin"，且有 XSS 风险） - 预览类场景（如 Markdown 实时渲染）适合用
srcdoc，但交互复杂组件不适合
不配 sandbox 就等于裸奔
没设 sandbox 时，srcdoc 内容拥有完整权限：可执行任意脚本、提交表单、弹窗、读写 localStorage，甚至污染父页面 document.domain（若可设置）。
- 最简安全底线：
sandbox="allow-scripts allow-same-origin"（允许脚本 + 同源 DOM 访问） - 仅展示静态内容？去掉
allow-scripts，连<script></script>标签都会被忽略 - 要调用父页面方法？加
allow-popups-to-escape-sandbox（仅现代浏览器支持） - Firefox 25+、Chrome 20+、Safari 6+、Edge 79+ 支持；IE 完全无视
srcdoc，必须提供src降级
和 data:text/html 对比：为什么选 srcdoc
srcdoc 和 src="data:text/html,..." 都能内联 HTML，但关键差异在 CSP 和解析开销。
-
srcdoc不受 CSP 中data:协议限制（除非显式禁止unsafe-inline） -
srcdoc无 Base64 编码/解码开销，字符串直接传入，更轻量 -
data:text/html有 URL 长度限制（部分浏览器约 2MB），超长内容会截断 -
srcdoc不触发浏览器对 data URI 的额外 MIME 类型校验，兼容性更稳
真正容易被忽略的是：哪怕你写了完整的 HTML 结构、加了 sandbox、也做了 src 降级，只要内容里用了未转义的双引号或尖括号，属性值就会提前截断——最终 iframe 显示为空白，控制台还不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
