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

相关推荐
MM_MS4 分钟前
Halcon控制语句
java·大数据·前端·数据库·人工智能·算法·视觉检测
一碗绿豆汤4 分钟前
Java语言概述和开发环境-1
java·开发语言
小画家~18 分钟前
第四十六: channel 高级使用
java·前端·数据库
Li_yizYa31 分钟前
Redis-常见数据类型及应用场景
java·数据库·redis
麦兜*37 分钟前
【springboot】图文详解Spring Boot自动配置原理:为什么@SpringBootApplication是核心?
android·java·spring boot·spring·spring cloud·tomcat
rabbit_pro1 小时前
Java使用Mybatis-Plus封装动态数据源工具类
java·python·mybatis
期待のcode1 小时前
Java虚拟机类加载机制
java·开发语言
短剑重铸之日1 小时前
《SpringBoot4.0初识》第四篇:原生镜像
java·原生镜像·springboot4.0
程序员欣宸1 小时前
LangChain4j实战之十二:结构化输出之三,json模式
java·人工智能·ai·json·langchain4j