预览

在浏览器本地工作区中预览 HTML、CSS 和 JavaScript,然后将其渲染到与父级 ComUtil 页面隔离的沙箱 iframe 中。

什么是 HTML 预览?

HTML 预览为你提供一个浏览器优先的工作区,用来一起测试原始 HTML、CSS 和 JavaScript。当你想快速制作 UI 原型、验证布局行为或排查标记问题,而又不想切换到更重的本地项目环境时,它会很有用。

工作原理

编辑器会将草稿保存在浏览器本地,然后通过写入具有隔离 origin 的沙箱 iframe 来刷新预览。脚本可以在该预览中运行,但沙箱会将它们与父级 ComUtil 页面隔离,而专用标签页路径也会保持同样的边界。

常见使用场景
  • 学习和练习 HTML/CSS
  • 原型设计 UI 组件
  • 测试响应式设计
  • 调试 CSS 布局问题
  • 在分享前检查隔离的 HTML 片段
功能
  • 输入时进行沙箱预览
  • 全面的 HTML/CSS/JavaScript 支持
  • 浏览器本地草稿存储
  • 用于更大预览的专用沙箱标签页
常见问题

我可以使用外部 CSS 框架吗?

是的,您可以包含 Bootstrap、Tailwind 或任何其他框架的 CDN 链接。在 HTML 的 head 部分添加 link 标签。

我的代码会被保存吗?

代码保存在浏览器的本地存储中。它在同一设备的不同会话之间持久存在,但不会跨设备同步。