HTML 在线运行
左侧写 HTML+CSS+JS，右侧 iframe 实时预览，支持运行与清空
代码在 iframe 沙箱中运行，不离开你的浏览器。
HTML 在线运行：iframe 沙箱里能做什么、不能做什么
预览是怎么实现的
工具的右侧预览是一个 iframe，你把左侧的 HTML、CSS、JS 写进去，点运行后这些代码被放进这个 iframe 里渲染。关键特性是你的代码在一个独立的文档环境里执行，不是直接写进当前页面。这带来两个直接好处：
- 样式隔离。预览里的
body { background: red }不会把工具页面染红。你写的任何 CSS 都作用在 iframe 文档内。 - 脚本隔离。预览里的 JS 拿到的是 iframe 的
window和document，不会意外操作到工具本身。这也意味着运行别人的片段比"直接执行"安全得多——这也是浏览器厂商为代码分享站点推荐的隔离方式。
相对路径的资源无法加载
这是最常遇到的困惑：<img src="./logo.png"> 或 <link href="/style.css"> 在预览里不会显示。
原因是没有基地址（base URL）。预览内容是一段独立注入的文档，它不属于任何真实的服务器目录，所以相对路径无从解析。三种可行做法：
| 做法 | 说明 |
|---|---|
| 用完整的 URL | https://example.com/logo.png 可以加载（对方允许跨域时） |
| 内联资源 | 图片转 data URI、CSS 写在 <style> 里、JS 写在 <script> 里 |
| 用 CDN 链接 | 引入框架或字体时用完整 CDN 地址（如 unpkg、jsdelivr） |
第二种就是本工具集里"图片转 Base64"的实用场景之一：把图标转成 data URI 贴进预览，不依赖任何外部资源。
网络请求与跨域限制
预览里可以用 fetch 或 XMLHttpRequest 发请求，但受浏览器同源策略约束：
- 请求第三方接口时，对方必须返回允许跨域的响应头（CORS）。很多公开 API 允许，很多不允许。
- 请求
file://或本地路径不会有结果。 - 不要在这里测试带密钥的接口请求——密钥会出现在浏览器发出的请求里，可能被记录在开发者工具的网络日志中。
能做什么，做不到什么
| 适合 | 不适合 |
|---|---|
| 快速验证一段 HTML/CSS 布局 | 需要构建步骤的项目（打包、转译、模块解析） |
| 试验 CSS 属性、动画、过渡 | 依赖 npm 包的项目（除非该包有可直接引用的 CDN 版本） |
| 测试字符串处理、正则、日期逻辑 | 需要 Node.js 环境的代码（文件系统、进程、原生模块） |
| 给别人演示一个最小的可运行例子 | 需要后端的完整功能（登录、持久化、数据库） |
| 验证一段代码在最小环境下的行为 | 性能基准测试（iframe 环境与真实页面有差异） |
最后一行值得说明：iframe 里的渲染时序、字体加载、资源优先级都和真实页面不同，所以在这里测出的性能数字只能作参考，不能当作依据。
预览环境的差异
- 视口尺寸。iframe 的宽度受页面布局限制，所以
100vw、媒体查询断点、vh单位都以 iframe 的尺寸为基准，而不是浏览器的真实窗口。想看响应式效果，应该用浏览器开发者工具的设备模拟功能，而不是预览框。 - 默认样式。iframe 有自己的默认 UA 样式（
body的默认 margin 等）。所以你的样式看起来"多了一点边距"是正常的——真实项目里通常会先做 reset 或归一化。 - Cookie 与存储。iframe 对当前站点的
localStorage访问受隔离策略限制，依赖存储的代码可能表现异常。 - 不执行表单提交。表单提交会尝试导航 iframe，行为与预期不同，测试交互应该用事件监听而不是真的提交。
工具怎么用
在左侧编辑 HTML（可以内嵌 <style> 和 <script>），点运行，右侧 iframe 立即渲染结果。全部在浏览器本地完成，代码不会离开你的设备——这对测试内部页面结构、未发布的组件、含业务逻辑的片段是必要前提。
需要调试时，在 iframe 上右键选择"检查"，可以在开发者工具里查看它的 DOM 与 console。这是排查预览里 JS 报错的直接方式。
常见问题
能引入外部 JS 库吗？
可以，在代码里用 <script src="..."> 引入 CDN 即可，但请只引用你信任的来源。