srcdoc属性需提供完整合法html文档结构，包含doctype、html、head、body；引号须转义，禁止外部资源引用，js/css须内联，不支持ie，需fallback，存在xss风险。
srcdoc 属性能直接写 HTML 字符串，但必须是完整、合法的文档结构
srcdoc 不是“把 div 塞进去就行”的快捷方式，它等价于整个 iframe 的 HTML 源码 —— 也就是说，你得提供一个最小可运行的 HTML 文档，包含 、、（虽然某些浏览器会自动补全，但别依赖）。漏掉 或写了未闭合标签，内容可能不渲染，或在 Safari 中完全空白。
常见错误现象：iframe 显示为空白，控制台无报错，检查 srcdoc 值发现只写了 "<div>hello</div>" —— 这不行。
- 必须显式包裹成完整 HTML：例如
srcdoc="<title>Test</title> <div>hello</div>" - 所有引号需转义：如果字符串本身含双引号（如
style="color:red"），外层用单引号定义属性，或对双引号做"转义 - 不能引用外部资源：
<script src="..."></script>或<link rel="stylesheet" href="...">在srcdoc中无效（除非内联）
内联 CSS 和 JS 必须写在 srcdoc 字符串里，且注意执行时机
srcdoc 内容加载后会像普通 HTML 一样解析，但它的 JS 执行环境受限：没有父页面作用域，无法直接访问 window.parent 或调用外部函数，除非显式暴露（比如通过 window.parent.postMessage）。
使用场景：快速预览模板、渲染隔离的富文本片段、嵌入轻量交互组件（如按钮计数器），避免跨域限制。
- CSS 推荐用
<style></style>标签内联，不要依赖外部文件 - JS 要放在
底部或用DOMContentLoaded，避免操作尚未存在的节点 - 注意字符编码：如果字符串含中文或特殊符号，确保 HTML 实体正确（如
©），否则可能被截断或解析失败
IE 不支持 srcdoc，需要 fallback 到 src + data URL 方案
Chrome、Firefox、Safari（≥10.1）、Edge（≥79）都支持 srcdoc；IE 完全不识别该属性，会直接忽略，导致 iframe 空白。不能只靠 srcdoc 单独工作。
兼容性影响：如果你的用户仍有 IE 流量（尤其企业内网），必须提供降级路径。
- fallback 常用做法：同时设置
src和srcdoc，现代浏览器优先用srcdoc，IE 回退到src - data URL 是可行替代：把 HTML 字符串 base64 编码后赋给
src="data:text/html;charset=utf-8;base64,..."，但要注意 URL 长度限制（部分浏览器限约 2MB）和编码开销 - 动态判断不可靠：不要用
if ('srcdoc' in document.createElement('iframe'))后再 setAttribute，因为 IE 下该属性存在但不生效，仍会空 iframe
srcdoc 内容无法通过 document.write 注入，也不能用 innerHTML 替换整个 body
很多人误以为可以在 srcdoc 加载后，用脚本去改它的 DOM —— 实际上，srcdoc iframe 是沙箱化的，父页面默认无法访问其 contentDocument（除非加 sandbox="allow-scripts allow-same-origin"，但这就破坏了隔离初衷）。
容易踩的坑：试图在父页面中写 iframe.contentDocument.body.innerHTML = '...'，结果报错 Blocked a frame from accessing...。
- 若需动态更新，应在生成
srcdoc字符串时就拼好最终 HTML，然后重新设置iframe.srcdoc（触发重载） - 频繁重设
srcdoc会有性能开销，且 iframe 会闪一下；适合低频、离散更新，不适合动画或高频状态同步 - 安全边界很关键：不要把用户输入未经转义直接拼进
srcdoc字符串，否则造成 XSS（比如注入<script>alert(1)</script>）
真正麻烦的是那些看似“只是换个字符串”的操作——比如想让 srcdoc 里的按钮点击后通知父页，得靠 postMessage；想加个全局样式？得塞进 style 标签里；想兼容 IE？得提前准备 data URL 或服务端渲染 fallback。这些不是配置开关，而是每一步都得手动闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
