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

相关推荐
vx_bisheyuange12 分钟前
基于SpringBoot的老年一站式服务平台
java·spring boot·后端·毕业设计
计算机毕设VX:Fegn089524 分钟前
计算机毕业设计|基于Java + vue水果商城系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·课程设计
TH_131 分钟前
2、前台工程使用代理,请求后台失败
java
川贝枇杷膏cbppg33 分钟前
DmServiceDMSERVER.log是干嘛的
java·服务器·数据库
无敌最俊朗@44 分钟前
Qt 多线程编程: moveToThread 模式讲解
java·开发语言
程序员清风1 小时前
别卷模型了!上下文工程才是大模型应用的王道!
java·后端·面试
go__Ahead1 小时前
【Java】ThreadLocal源码解析
java
利剑 -~1 小时前
Spring AI Alibaba 1.1版本
java·人工智能·spring
雨中飘荡的记忆1 小时前
Guava工具库实战
java
while(1){yan}1 小时前
JAVA中如何操作文件
java·开发语言·面试