本文介绍使用 html `
在构建静态网站或使用无文件上传权限的建站平台（如 Squarespace、Wix 或某些 CMS 的受限模式）时，你可能手头有一个完整的 HTML 文件（例如由 Notion 导出的博客页面），却无法将其部署为可访问的 URL。此时，传统 <iframe src="https://example.com/page.html"> 方式失效——因为 src 必须指向一个有效 URL，而你只有原始 HTML 字符串。
幸运的是，HTML5 提供了 srcdoc 属性，它允许你将整个 HTML 文档以字符串形式内联写入 <iframe> 标签中，浏览器会将其解析并渲染为独立的、沙盒化的子文档。这是实现“零托管嵌入”的标准、原生且跨浏览器支持（Chrome、Firefox、Safari、Edge 均支持）的方案。
✅ 正确用法示例
<iframe
srcdoc='<!doctype html>
<html><head><title>Embedded Post</title></head>
<body>
<h2>My Notion Blog Post</h2>
<p>This HTML is embedded <strong>directly</strong>, no server needed.</p>
<ul>
<li>Supports CSS <style> blocks</li>
<li>Can load external JS/CSS via CDN (e.g., Bootstrap, Prism)</li>
<li>Respects same-origin restrictions — no cross-site scripting risk</li>
</ul>
</body></html>'
width="100%"
height="600"
sandbox="allow-scripts allow-same-origin"
title="Embedded blog content">
<p>Your browser does not support iframes with srcdoc.</p>
</iframe>? 关键要点：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，需在 <head> 中内联 <style> 或引入外部 CSS（推荐 CDN）；
- JavaScript 执行：外部脚本（如 bootstrap.bundle.min.js）可正常加载，但 document.write、window.parent 访问受 sandbox 严格限制；
- SEO 与可访问性：搜索引擎可索引 srcdoc 内容，但屏幕阅读器对 iframe 内容的支持依赖 title 属性（务必设置有意义的 title）；
- Squarespace 兼容性：在 Squarespace 的「Code Block」或「Embed Block」中粘贴含 srcdoc 的 iframe 即可生效（无需额外插件或开发者模式）。
✅ 总结
<iframe srcdoc="..."> 是将任意本地 HTML 片段安全、可靠、标准化嵌入网页的终极轻量方案。它绕过了托管依赖，保留了 HTML 的完整表现力，并具备良好的浏览器兼容性与语义清晰性。对于内容创作者、技术博主或需要快速复用导出 HTML 的场景，这不仅是“可行方案”，更是推荐的最佳实践。
