本文介绍使用 html `
在实际开发中，我们常需将外部 HTML 内容（如 Notion 导出的静态页）嵌入现有网站。传统方式依赖 src 属性指向远程 URL，但若 HTML 仅存于本地、无法部署到公网或受限于平台（如 Squarespace 不支持自定义文件上传），该方案即不可行。
此时，srcdoc 属性是标准、轻量且兼容性良好的解决方案。它允许你将完整的 HTML 文档（含 DOCTYPE、<head>、<body> 及内联资源）作为字符串直接写入 <iframe> 标签中，浏览器会将其解析为独立的、沙箱化的子文档进行渲染——效果等同于加载一个真实 URL，但完全免去托管环节。
✅ 基本语法示例：
<iframe srcdoc='<!doctype html><html><head><title>Inline</title></head><body><h1>Hello from srcdoc!</h1></body></html>' title="Embedded content" width="100%" height="400" > <p>Your browser does not support iframes.</p> </iframe>
⚠️ 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- 引号嵌套需谨慎：srcdoc 值必须用单引号（'）或双引号（"）包裹，其内部 HTML 若含相同引号，必须转义（如 " 或 '），否则导致 HTML 解析失败。推荐统一使用单引号包裹 srcdoc，并在内部 HTML 中自由使用双引号（如 <link href="...">），避免转义。
- 字符编码：确保 srcdoc 中的 HTML 使用 UTF-8 编码；若含中文或特殊符号，建议对敏感字符（如 <, >, &）做 HTML 实体转义，或使用 JavaScript 动态注入以规避手动转义风险。
- 样式与脚本限制：srcdoc 内容默认运行在独立上下文，可正常加载 CDN 资源（如 Bootstrap、jQuery），但无法访问父页面 DOM 或 localStorage（受同源策略与 iframe 沙箱限制）。如需交互，需通过 postMessage 显式通信。
- 浏览器兼容性：现代浏览器（Chrome 20+, Firefox 19+, Safari 10.1+, Edge 14+）均支持 srcdoc，旧版 IE 不支持——若需兼容 IE，应提供 src 回退链接（如指向临时托管地址）。
? Squarespace 实用技巧：
在 Squarespace 的「代码块」或「嵌入块」中，直接粘贴含 srcdoc 的 <iframe> 即可生效。为提升可读性与维护性，建议：
- 先在本地编辑好完整 HTML（含 CSS/JS CDN 链接）；
- 将整个 HTML 字符串用单引号包裹，并替换内部所有单引号为 '（或改用双引号）；
- 插入 <iframe srcdoc="...">，并添加 width="100%" 和 min-height（如 min-height: 60vh）保证响应式显示。
? 进阶提示： 对于复杂 HTML（含大量引号、换行或动态内容），可借助 JavaScript 动态设置 srcdoc，避免 HTML 层级转义混乱：
<script>
const rawHTML = `<!doctype html><html><body><h1>Dynamic Content</h1><p>Time: ${new Date().toLocaleString()}</p></body></html>`;
document.getElementById('notion-iframe').srcdoc = rawHTML;
</script>
<iframe id="notion-iframe" title="Notion Export"></iframe>综上，srcdoc 是嵌入离线 HTML 的标准、可靠且零依赖方案。只要合理处理引号与编码，即可在 Squarespace、WordPress 或任意静态站点中，安全、高效地复用本地生成的 HTML 内容。
