在线免费 HTML 预览工具

2025/4/18 21:06:23 来源：https://blog.csdn.net/ryo1060732496/article/details/145503491 浏览: 次关键词：在线免费 HTML 预览工具

在线体验

作用：可以直接预览 html 的页面效果。

https://houbb.github.io/tools/html-preview.html

创作背景

有时候用手机查阅资料时，获取到一段 html 代码，但是无法查看对应的实际效果。

特别是苹果系统，没啥简单的方法，于是就想着自己实现一个，直接预览页面的效果。

核心代码

<textarea id="html-input" placeholder="请输入HTML代码..."></textarea><button οnclick="updatePreview()">预览</button><div class="preview-pane"><iframe id="preview-frame"></iframe>
</div>function updatePreview() {const input = document.getElementById('html-input').value;const iframe = document.getElementById('preview-frame');iframe.srcdoc = input;
}