本文介绍使用 html5 的 `srcdoc` 属性，将本地或未托管的完整 html 代码直接嵌入 `
当您从 Notion 导出 HTML 博客内容，却无法将其上传至服务器（如 Squarespace 不支持自定义 HTML 文件托管），传统
srcdoc 允许您将完整的 HTML 文档（包括 、、
、 等）以字符串形式直接写入 iframe 标签内，浏览器会将其解析为独立、沙盒化的子文档进行渲染，效果等同于加载外部 HTML 页面，且无需任何服务端支持。✅ 核心优势：
- 零部署：纯前端实现，复制粘贴即可生效；
- 完整支持：可包含 CSS、外部 CDN 资源（如 Bootstrap、jQuery）、JavaScript 交互逻辑；
- 沙盒安全：默认受同源策略与 iframe 沙箱限制（可通过 sandbox 属性精细控制权限）。
⚠️ 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- 引号冲突：srcdoc 值需用单引号（'）包裹，其内部 HTML 应统一使用双引号（"），避免提前闭合属性值。若原始 HTML 含单引号（如 onclick="alert('done')"），需转义为 ' 或改用 '；
- 编码规范：确保 HTML 字符串 UTF-8 编码，特殊符号（如 &, ）建议保留原义（现代浏览器兼容良好），但复杂内容可考虑 HTML 实体编码；
- Squarespace 兼容性：在 Embed Block 中粘贴含 srcdoc 的 iframe 代码完全可行，但需关闭富文本编辑器的自动格式化（推荐在 Code Block 或“Custom HTML”区域插入）；
-
回退方案：务必设置 src=""（空值）并提供
内容作为不支持 srcdoc 的老旧浏览器降级提示。
? 最小可用示例：
? 进阶技巧：
- 若 Notion 导出的 HTML 含内联样式或脚本，可直接复制 内容，但建议补全精简版 结构以确保跨浏览器一致性；
- 外部资源（如 CDN 的 CSS/JS）可照常引入，srcdoc 中的相对路径仍按父页面上下文解析；
- 如需响应式适配，可在 srcdoc 的 中加入 viewport meta 标签，并配合 CSS 设置 width: 100% 和 min-height（见下方样式参考）：
✅ 总结：srcdoc 是嵌入离线 HTML 的标准、轻量、可靠方案。只要您的目标平台允许注入原始 HTML（如 Squarespace 的 Embed Block、WordPress 自定义 HTML 块、Webflow Embed Element），即可立即启用——无需后端、不依赖第三方服务，真正实现“所导即所得”的博客内容复用。
