在线体验

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

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

创作背景

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

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

核心代码

  [js]
1
2
3
4
5
6
7
8
9
10
11
12
13
<textarea id="html-input" placeholder="请输入HTML代码..."></textarea> <button onclick="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; }

参考资料

https://houbb.github.io/2025/02/05/tools-html-prefix