srcdoc属性在IE中完全不支持，需用src降级；其内容必须是完整HTML结构，引号需正确转义，且应配置sandbox限制权限以防范XSS风险。
srcdoc 属性在现代浏览器中工作良好，但 IE 完全不支持——不是渲染异常，是彻底忽略，iframe 直接空白。解决兼容问题的核心不是“让它在 IE 里跑起来”，而是用 src 做降级，让不支持的浏览器走另一条路。
IE 和旧 Edge 必须 fallback 到 src
IE（包括 IE11）根本不识别 srcdoc 属性，既不报错也不尝试解析，结果就是 iframe 渲染为空白。你不能靠 polyfill 或 JS 检测后动态写入，因为属性本身被浏览器跳过。
- 必须同时设置
src和srcdoc：现代浏览器优先用srcdoc，IE 回退到src -
src值不能为about:blank或空字符串（部分 IE 版本会拒绝加载），推荐指向一个最小化 HTML 文件，如fallback.html - 这个 fallback 文件内容只需一行提示：
<p>请升级浏览器以查看完整内容</p>，或重定向逻辑（需服务端配合） - 不要依赖
<noscript>或 JS 检测来补救——srcdoc的缺失发生在 HTML 解析阶段，JS 运行时早已错过时机
srcdoc 字符串结构不合法导致 Safari/Chrome 渲染异常
常见现象是 iframe 显示空白、只渲染部分标签、或控制台无报错但内容消失。根本原因是浏览器把 srcdoc 当作完整 HTML 文件解析，而非片段。
- 必须包含
<!DOCTYPE html>、<html>、<head>、<body>四层结构，缺一不可 -
<title>虽非强制，但 Safari 旧版（≤14）可能因缺失而拒绝渲染 - 未闭合标签（如
<div>hello）会导致后续所有内容被丢弃——浏览器按标准文档解析，不是“尽力而为” - 避免用 JS 自动拼接
srcdoc字符串时漏掉</html>；建议模板化生成，而非字符串拼接
引号嵌套和特殊字符转义踩坑点
外层 HTML 属性值与内联 HTML 中的引号冲突，是最隐蔽的失败原因：表面代码无误，实际属性被提前截断，iframe 变成无效标签。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 强烈推荐用单引号包裹整个
srcdoc属性：srcdoc='<div style="color:red">OK</div>' - 若必须用双引号包裹属性，则内部所有双引号必须实体转义：
srcdoc="<div style="color:red">OK</div>" - 原始 HTML 含单引号（如
onclick="alert('done')"）时，内部单引号要转成'或改用双引号包裹事件参数 - 中文、emoji、数学符号等 UTF-8 字符无需额外编码，但确保文件保存为 UTF-8 without BOM（VS Code 右下角确认）
没配 sandbox 就等于默认开放全部权限
不加 sandbox 属性时，srcdoc 内容拥有和独立页面完全相同的权限：可执行脚本、提交表单、弹窗、读写 localStorage，甚至尝试修改 top.location —— 即使内容是你自己生成的，只要含用户输入（比如 Markdown 预览），XSS 风险就真实存在。
- 最简安全配置是
sandbox=""：禁用脚本、表单、弹窗、插件、存储访问 - 需要运行 JS？用
sandbox="allow-scripts"，但绝不要加allow-same-origin，否则 iframe 可读取父页 DOM - 若需调用父页方法，只能通过
window.parent.postMessage()，不能直接访问window.parent.xxx - Firefox/Chrome/Safari 对
sandbox行为一致，但 IE 不支持sandbox，所以它 fallback 到src后，该属性也被忽略——这反而是种保护
真正容易被忽略的是：动态更新 iframe.srcdoc = newHtml 会销毁整个 JS 上下文，已绑定的事件、定时器、全局变量全部丢失。如果你在做实时预览，别反复重写 srcdoc，改用 iframe.contentDocument.body.innerHTML（需配 sandbox="allow-scripts allow-same-origin"，且承担 XSS 风险）。
