srcdoc内嵌HTML详解与使用技巧

srcdoc 属性虽能便捷地以内联字符串方式嵌入HTML内容，但它并非简单的“塞一段HTML”技巧，而是要求提供结构完整、语法合法的独立HTML文档（含DOCTYPE、html、head、body），所有引号需转义，CSS和JS必须内联，严禁外部资源引用；它在现代浏览器中实现安全隔离的轻量级嵌入，但完全不兼容IE，必须搭配src fallback或data URL降级；更关键的是，其内容沙箱化严格，父页面无法直接操作内部DOM，动态更新需重设srcdoc触发重载，且未经转义的用户输入极易引发XSS风险——看似一行代码的便利，背后实则是结构、兼容、安全与通信机制的全链路精细把控。

srcdoc 属性能直接写 HTML 字符串，但必须是完整、合法的文档结构

srcdoc 不是“把 div 塞进去就行”的快捷方式，它等价于整个 iframe 的 HTML 源码 —— 也就是说，你得提供一个最小可运行的 HTML 文档，包含 、、（虽然某些浏览器会自动补全，但别依赖）。漏掉 或写了未闭合标签，内容可能不渲染，或在 Safari 中完全空白。

常见错误现象：iframe 显示为空白，控制台无报错，检查 srcdoc 值发现只写了 "

• 必须显式包裹成完整 HTML：例如 srcdoc="
  hello
  "
• 所有引号需转义：如果字符串本身含双引号（如 style="color:red"），外层用单引号定义属性，或对双引号做 " 转义
• 不能引用外部资源： 或 在 srcdoc 中无效（除非内联）

内联 CSS 和 JS 必须写在 srcdoc 字符串里，且注意执行时机

srcdoc 内容加载后会像普通 HTML 一样解析，但它的 JS 执行环境受限：没有父页面作用域，无法直接访问 window.parent 或调用外部函数，除非显式暴露（比如通过 window.parent.postMessage）。

使用场景：快速预览模板、渲染隔离的富文本片段、嵌入轻量交互组件（如按钮计数器），避免跨域限制。

• CSS 推荐用