srcdoc不支持base64编码，必须传入完整html字符串；而base64需通过data:text/html url在src中使用。两者路径不同，混用会导致渲染失败。

srcdoc 不是用来嵌入 base64 网页源码的 —— 它直接接收 HTML 字符串，不经过 base64 编码。想用 base64，得走 src + data:text/html;charset=utf-8;base64, 这条路；想用 srcdoc，就得拼完整 HTML 字符串，且不能编码。

---

srcdoc 和 base64 是两条完全不同的路径

很多人搜“base64 网页源码”顺手就往 srcdoc 里塞 base64 字符串，结果 iframe 空白、无报错、调试无从下手。因为：srcdoc 的值是纯文本 HTML 字符串，浏览器原样解析；而 data: URL 才是 base64 的合法载体。

• srcdoc="OK" ✅ 直接生效
• srcdoc="PGh0bWw+PGJvZHk+T0s8L2JvZHk+PC9odG1sPg==" ❌ 解析为一堆乱码标签，不是 HTML 文档
• src="data:text/html;charset=utf-8;base64,PGh0bWw+PGJvZHk+T0s8L2JvZHk+PC9odG1sPg==" ✅ 正确解码后渲染

---

srcdoc 必须是完整 HTML 文档字符串

写成 srcdoc="<div>Hello</div>" 就会出问题：Safari 显示空白，Chrome 渲染异常，Firefox 行为不一致。这不是 bug，是规范要求 —— srcdoc 的值等价于一个独立 HTML 文件的内容。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 必须包含 （不能省，旧版 Safari 可能拒渲染）
• 必须有 、、 三层包裹
• <title></title> 虽非强制，但缺失时部分浏览器控制台警告或 SEO 工具识别失败
• 未闭合标签（如 <div>hello）会导致后续内容被忽略，DOM 构建中断<hr> <h3>双引号、单引号、JS/CSS 内联怎么写才不出错</h3> <p><code>srcdoc 属性值本身是 HTML 属性，所以外层引号和内部 HTML 字符串的引号容易冲突。常见错误是写成 srcdoc="<div style="color:red">OK</div>" —— 第二个双引号提前闭合属性，后面全被丢弃。
  • 推荐外层用单引号：srcdoc='<div style="color:red">OK</div>'
  • 若内容含单引号（如 onclick="alert('Hi')"），需转义：onclick="alert('Hi')" 或改用双引号包裹事件值
  • CSS 必须用 <style></style> 内联，<link href="..."> 在 srcdoc 中完全无效
  • JS 必须内联，且建议放在 底部或包装在 DOMContentLoaded 中，避免操作未挂载节点

  ---

  sandbox 是硬性安全要求，不是可选项

  没加 sandbox 的 srcdoc 相当于把 XSS 入口直接敞开：脚本可执行、表单可提交、window.open() 可弹窗、甚至尝试修改 top.location。哪怕内容是你自己拼的，只要混入用户输入（比如富文本预览），风险就真实存在。

  • 最安全起点：sandbox=""（空值），禁用脚本、插件、表单、弹窗、存储访问
  • 仅当真需要 JS 时，加 sandbox="allow-scripts"；若还需通信，补 allow-top-navigation-by-user-activation（注意不是 allow-top-navigation）
  • 绝对不要用 sandbox="allow-same-origin" —— 它解除同源限制，让恶意脚本读取父页 DOM
  • IE 完全不支持 srcdoc，必须同时设 src 作 fallback，例如指向一个静态 HTML 文件或 data URL

  srcdoc 的边界很清晰：它适合小而隔离、内容可控、无需外部资源的场景。一旦 HTML 字符串变长、含动态数据、或需复用样式/脚本，就该考虑 src + 服务端模板，而不是硬拼字符串。