srcdoc属性值必须用单引号包裹，内部HTML统一用双引号；若外层用双引号且内部含双引号（如style="color:red"），会导致解析提前截断。
srcdoc属性值必须用单引号包裹，内部HTML统一用双引号
浏览器解析srcdoc时，会把整个属性值当作一个字符串读取。如果外层用双引号，而内部HTML又含style="color:red"这类双引号，就会提前截断——比如srcdoc="<div style="color:red">OK</div>"实际只被解析到srcdoc="<div style="，后面全丢弃，iframe 空白且无报错。
正确做法是外层改用单引号：srcdoc='<div style=" color:red>OK</div>'。这样内部所有双引号都合法，无需转义，也最易读、最不易出错。
- 禁止混用：不要写成
srcdoc='<div style="color:red" onclick="alert(" x> —— 最后一个双引号会闭合<code>alert(里的字符串，导致语法断裂 - 遇到内部必须用单引号的场景（如
onclick="alert('done')"），要么把单引号改成onclick="alert('done')"，要么统一改用'实体（注意不是\'，HTML里不认JS转义） - 构建工具（如Webpack、Vite）若自动格式化HTML，可能把单引号强制转回双引号，需关掉相关规则或用
/* prettier-ignore */注释绕过 - 不要依赖浏览器自动补全：Chrome有时会“帮忙”加
<html>，但Safari、Firefox不保证，不能当标准用 - 动态拼接时，确保
<head>里所有style和script都内联，<link href="...">和<script src="...">完全无效 - 如果内容来自用户输入（如富文本编辑器预览），务必对
<、&等做HTML实体编码，否则可能破坏结构 - 注意：某些CMS或编辑器（如Squarespace的Embed Block）会自动把单引号转成双引号，需切换到“Code Block”或关闭富文本自动格式化
- 服务端生成时（如PHP模板），用
echo "srcdoc='" . htmlspecialchars($html, ENT_QUOTES, 'UTF-8') . "'";，其中ENT_QUOTES确保单双引号都被转义，避免注入 - JS动态设置时：
iframe.srcdoc = '<title>Test</title> <p>OK</p>';——JS字符串用单引号，内部HTML仍用双引号，逻辑一致 - 错误写法：
<iframe srcdoc="..."><p>IE fallback</p></iframe>——IE下iframe为空白，<p>根本不会显示 - 正确写法：
<iframe src="" srcdoc='<!DOCTYPE html><html><body><p>OK</p></body></html>'><p>Your browser does not support srcdoc.</p></iframe> - 不要指望CSS的
@supports (srcdoc: "")做检测——该特性未被任何浏览器实现，纯属无效
srcdoc内容本身必须是完整HTML文档，不是任意HTML片段
很多人以为srcdoc="<p>Hello</p>"就能工作，结果在Safari空白、Chrome渲染异常。这是因为srcdoc不是往<body>里插内容，而是直接作为整个HTML文档源码加载——缺<html>、<head>、<body>，浏览器行为不可靠。
最小可用结构必须包含：<!DOCTYPE html><html><head><title>X</title></head><body><p>Hello</p></body></html>。其中<title>虽非强制，但旧版Safari可能拒渲染空<title>。
立即学习“前端免费学习笔记（深入）”；
为什么不能用双引号包裹srcdoc却在内部用双引号
这不是风格偏好，而是HTML解析规则决定的。HTML规范要求属性值必须用引号包裹，而双引号是首选；但一旦你选了双引号作外层定界符，内部所有双引号就必须转义，否则解析器会在第一个"处终止属性值。而srcdoc内容本身又大量依赖双引号（class="x"、id="y"），全转义成本高、易漏、难维护。
单引号作外层定界符是唯一兼顾安全与可读的方案。它不违反HTML规范（单引号在HTML中完全合法），且让内部HTML保持自然书写习惯。
IE不支持srcdoc，降级方案必须显式提供
IE（包括IE11）完全忽略srcdoc，既不报错也不fallback，结果就是iframe空白。这不是兼容性差，是彻底不识别该属性。
降级必须靠src属性配合内容降级：给src设为空字符串src=""，并在<iframe>标签内部放降级内容，例如一段提示文字或静态HTML片段。浏览器不支持srcdoc时，会忽略它，走src逻辑；而src=""触发同源空白页，此时内部内容才生效。
真正容易被忽略的不是引号怎么配，而是把srcdoc当成“带样式的div”来用。它本质是一份独立HTML文档，从DOCTYPE开始就得严丝合缝。少一个<html>，多一个未转义的'，或者忘了sandbox，都可能让页面在某个环节静默失败。
