本文介绍使用 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 的老旧浏览器降级提示。
HISUI 前端框架开发指南（IRIS版）下载HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
? 最小可用示例：
<iframe srcdoc='<!doctype html><html><head><title>My Post</title></head><body><h2>Hello from Notion!</h2><p>This renders inline.</p></body></html>' src="" width="100%" height="600" style="border: 1px solid #eee;"> <p>Your browser does not support inline HTML embedding.</p> </iframe>
? 进阶技巧：
- 若 Notion 导出的 HTML 含内联样式或脚本，可直接复制 内容，但建议补全精简版 结构以确保跨浏览器一致性；
- 外部资源（如 CDN 的 CSS/JS）可照常引入，srcdoc 中的相对路径仍按父页面上下文解析；
- 如需响应式适配，可在 srcdoc 的 中加入 viewport meta 标签，并配合 CSS 设置 width: 100% 和 min-height（见下方样式参考）：
<style>
iframe {
width: 100%;
min-height: 70vh;
border: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
</style>✅ 总结：srcdoc 是嵌入离线 HTML 的标准、轻量、可靠方案。只要您的目标平台允许注入原始 HTML（如 Squarespace 的 Embed Block、WordPress 自定义 HTML 块、Webflow Embed Element），即可立即启用——无需后端、不依赖第三方服务，真正实现“所导即所得”的博客内容复用。
