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

相关推荐
jason成都1 小时前
RTKLIB 的 Java 移植版来了:rtklib-java v3.3.0 功能全景
java·gnss·rtklib·rtklib_java
LazyHunter91 小时前
JDK 28:Java 下一步方向解析与新特性展望
java·jdk
m0_639906941 小时前
Java 重写 Override 与重载 Overload 区别、访问修饰符、static 关键字
java·开发语言
GIS数据转换器1 小时前
基于CIM的城市智慧供热监管服务平台
java·大数据·开发语言·人工智能·后端·物联网·struts
m0_639906942 小时前
SpringBoot自动配置原理
java·spring boot·后端
海鸥-w2 小时前
数据库冗余字段设计笔记
java·数据库·笔记·oracle
工具派2 小时前
PDF签名贴上去为什么发虚?尺寸、DPI与坐标的边界实测
java·python·pdf
萧瑟余晖3 小时前
Spring Data综合实战与调优详解
java·后端·spring
yuniko-n3 小时前
【JUC】原子类 LongAdder
java