能，但必须满足两个硬性条件：字符串是完整的、语法合法的HTML文档（含<!DOCTYPE html><html><head><body>结构），且所有双引号等特殊字符需转义或用单引号包裹属性值，否则解析会提前截断。
srcdoc 属性能直接渲染 JS 生成的 HTML 字符串吗？
能，但必须满足两个硬性条件：字符串是**完整的、语法合法的 HTML 文档片段**（含 <html>、<head>、<body> 结构），且内容中不能有未转义的双引号或</iframe>——否则会提前截断解析。
为什么直接拼接 innerHTML 字符串到 srcdoc 会失败？
常见错误是把仅含 <div>Hello</div> 这类“片段”赋给 srcdoc。浏览器会尝试将其当作完整文档解析，缺失 <html> 根节点时行为不一致（Chrome 可能补全，Firefox/Safari 可能空白或报错）。
正确做法是确保 JS 生成的字符串包含最小完整结构：
const htmlStr = `<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body><h1>${title}</h1><p>${content}</p></body>
</html>`;
iframe.srcdoc = htmlStr;
- 所有双引号（包括属性值）必须用
"转义，或改用单引号包裹字符串再用模板字面量 -
</iframe>出现在字符串内会立即终止 iframe 解析，务必避免（比如用户输入含该字符串时需过滤或替换） -
srcdoc不支持加载外部资源（如<script src="xxx">或<img src="xxx">），除非开启sandbox并显式允许
如何安全注入动态内容到 srcdoc？
手动拼接易出错，推荐用函数封装转义逻辑：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“前端免费学习笔记（深入）”；
function escapeHtml(str) {
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
const title = '用户输入<script>alert(1)</script>';
const content = '含 "引号" 和 & 符号';
iframe.srcdoc = `<!DOCTYPE html><html><head><meta charset="utf-8"></head><body><h1>${escapeHtml(title)}</h1><p>${escapeHtml(content)}</p></body></html>`;
- 只对动态插入的内容调用
escapeHtml()，静态 HTML 结构（如标签、属性名）无需转义 - 若需执行 JS，必须添加
sandbox="allow-scripts"，但此时脚本默认无 DOM 访问权限，parent、top等全局对象不可用 -
srcdoc内容无法通过document.write()动态修改，只能重新赋值整个字符串
srcdoc 在不同浏览器中的兼容性和 fallback 处理
IE 完全不支持 srcdoc，Safari 10.1+、Chrome 20+、Firefox 25+ 支持。没有 srcdoc 时，浏览器会回退到 src 属性。
稳妥做法是同时设置两者，并让 src 指向一个空 HTML 文件（如 about:blank 或本地 empty.html）作为兜底：
iframe.srcdoc = generatedHtml; iframe.src = 'about:blank'; // 防止旧浏览器发起意外请求
- 不要用
src="data:text/html,..."替代srcdoc，它在 Safari 中有长度限制且无法触发同源策略隔离 -
srcdoc渲染的页面始终是同源的（被视为“unique opaque origin”），无法通过postMessage与父页通信，除非显式设置sandbox="allow-scripts allow-same-origin"（但后者会削弱安全隔离）
真正麻烦的不是怎么写，而是忘记 srcdoc 的内容本质是独立文档——它有自己的字符编码、样式作用域、脚本执行环境，和父页面完全割裂。稍不注意就会掉进“我以为它能访问 parent”的坑里。
