本文介绍使用 html `
在构建静态网站或使用无文件上传权限的建站平台（如 Squarespace、Wix 或某些 cms 的受限模式）时，你可能手头有一个完整的 HTML 文件（例如由 notion 导出的博客页面），却无法将其部署为可访问的 URL。此时，传统
幸运的是，html5 提供了 srcdoc 属性，它允许你将整个 HTML 文档以字符串形式内联写入
✅ 正确用法示例
<iframe srcdoc=' Embedded Post My Notion Blog Post
This HTML is embedded directly, no server needed.
- Supports css zuojiankuohaophpcnstyleyoujiankuohaophpcn blocks
- Can load external js/CSS via CDN (e.g., bootstrap, Prism)
- Respects same-origin restrictions — no cross-site scripting risk
' width="100%" height="600" sandbox="allow-scripts allow-same-origin" title="Embedded blog content"> Your browser does not support iframes with srcdoc.
立即学习“前端免费学习笔记（深入）”；
? 关键要点：srcdoc 值必须是单引号或双引号包裹的完整 HTML 字符串；若 HTML 内含双引号（如 class=”btn”），建议外层用单引号包裹，避免转义混乱；如需包含单引号（如 onclick=”alert(‘Hi’)”），则需对内部单引号进行 HTML 实体编码（’）或使用 ” 替代双引号；推荐添加 sandbox 属性（如 sandbox=”allow-scripts allow-same-origin”）以启用脚本执行和基础 dom 访问能力（注意：allow-same-origin 在 srcdoc 中实际效果等同于普通 iframe，因 srcdoc 内容默认与父页同源）；src=”” 可留空，但建议显式设置为空字符串以避免浏览器回退到 src=”about:blank” 的兼容行为。
⚠️ 注意事项与最佳实践
- 长度限制：虽然现代浏览器对 srcdoc 字符串长度容忍度较高（通常 >1MB），但过长内容可能导致渲染延迟或移动端内存压力，建议压缩 HTML（移除空白、注释）后再嵌入；
- 样式隔离：srcdoc 内容完全独立于父页面 CSS，需在 中内联
- javaScript 执行：外部脚本（如 bootstrap.bundle.min.js）可正常加载，但 document.write、window.parent 访问受 sandbox 严格限制；
- seo 与可访问性：搜索引擎可索引 srcdoc 内容，但屏幕阅读器对 iframe 内容的支持依赖 title 属性（务必设置有意义的 title）；
- Squarespace 兼容性：在 Squarespace 的「Code Block」或「Embed Block」中粘贴含 srcdoc 的 iframe 即可生效（无需额外插件或开发者模式）。
✅ 总结