在线免费 HTML 预览工具

在线体验

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

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

创作背景

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

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

核心代码

js 复制代码
<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;
}

参考资料

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

相关推荐
七老板的blog2 分钟前
多阶段 AI 评测流水线架构设计与实践
java·人工智能·spring
qq_458148208 分钟前
科大讯飞实时语音识别(rtasr)真实项目踩坑经验总结与手把手教学真实可运行Demo
java·开发语言·websocket·语音识别
创业之路&下一个五年11 分钟前
mvvm中v和vm关系,vm中v和m的关系?
java·开发语言·javascript
阿昌喜欢吃黄桃11 分钟前
Java优质开源AI项目
java·ai·langchain·开源·rag·springai·langchain4j
biubiubiu070626 分钟前
SpringBoot3.5.4 AOP环绕通知使用
java·spring boot
西安邮电大学35 分钟前
Redis四大经典缓存问题
java·redis·后端·其他·面试
超梦dasgg43 分钟前
Redisson解锁失败,WatchDog会不会一直续期下去?
java·redis
Chase_______1 小时前
【Java基础 | 11】异常处理进阶:throw、throws、自定义异常与异常链讲清楚
java·开发语言·python
DFT计算杂谈1 小时前
VASP 磁性结构可视化:一键生成完美 VESTA / MCIF
java·前端·css·html·css3
砍材农夫1 小时前
物联网实战:Spring Boot MQTT | 模拟器Paho客户端拆解核心点
java·javascript·网络·spring boot·后端·物联网