在线免费 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

相关推荐
怒放吧德德22 分钟前
Netty 4.2 入门指南:从概念到第一个程序
java·后端·netty
雨中飘荡的记忆2 小时前
大流量下库存扣减的数据库瓶颈:Redis分片缓存解决方案
java·redis·后端
心之语歌4 小时前
基于注解+拦截器的API动态路由实现方案
java·后端
华仔啊6 小时前
Stream 代码越写越难看?JDFrame 让 Java 逻辑回归优雅
java·后端
ray_liang6 小时前
用六边形架构与整洁架构对比是伪命题?
java·架构
Ray Liang7 小时前
用六边形架构与整洁架构对比是伪命题?
java·python·c#·架构设计
Java水解7 小时前
Java 中间件:Dubbo 服务降级(Mock 机制)
java·后端
SimonKing11 小时前
OpenCode AI辅助编程,不一样的编程思路,不写一行代码
java·后端·程序员
FastBean11 小时前
Jackson View Extension Spring Boot Starter
java·后端
Seven9713 小时前
剑指offer-79、最⻓不含重复字符的⼦字符串
java