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

相关推荐
shuair10 小时前
springboot整合redisson单机模式
java·spring boot·后端
Remember_99310 小时前
Java 单例模式深度解析:设计原理、实现范式与企业级应用场景
java·开发语言·javascript·单例模式·ecmascript
代码or搬砖10 小时前
ReentranLock中AQS讲解
java·开发语言·redis
rainbow688910 小时前
C++智能指针实战:从入门到精通
java·开发语言
HalvmånEver10 小时前
Linux:进程 vs 线程:资源共享与独占全解析(线程四)
java·linux·运维
qq_124987075310 小时前
基于springboot的竞赛团队组建与管理系统的设计与实现(源码+论文+部署+安装)
java·vue.js·spring boot·后端·信息可视化·毕业设计·计算机毕业设计
瑞雪兆丰年兮10 小时前
[从0开始学Java|第五天]Java循环高级综合练习
java·开发语言
J_liaty10 小时前
SpringBoot 自定义注解实现接口加解密:一套完整的多算法方案
java·spring boot·算法
zhengfei61110 小时前
踪有趣的 Linux(和 UNIX)恶意软件。提交 PR
java·数据库·mysql
「QT(C++)开发工程师」10 小时前
C++ 观察者模式
java·c++·观察者模式