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

相关推荐
超级码.里奥.农16 分钟前
零基础 “入坑” Java--- 七、数组(二)
java·开发语言
hqxstudying25 分钟前
Java创建型模式---单例模式
java·数据结构·设计模式·代码规范
挺菜的33 分钟前
【算法刷题记录(简单题)002】字符串字符匹配(java代码实现)
java·开发语言·算法
A__tao34 分钟前
一键将 SQL 转为 Java 实体类,全面支持 MySQL / PostgreSQL / Oracle!
java·sql·mysql
一只叫煤球的猫1 小时前
真实事故复盘:Redis分布式锁居然失效了?公司十年老程序员踩的坑
java·redis·后端
猴哥源码1 小时前
基于Java+SpringBoot的农事管理系统
java·spring boot
面朝大海,春不暖,花不开1 小时前
Java网络编程:TCP/UDP套接字通信详解
java·网络·tcp/ip
慕y2742 小时前
Java学习第十五部分——MyBatis
java·学习·mybatis
A__tao2 小时前
SQL 转 Java 实体类工具
java·数据库·sql
喝可乐的布偶猫2 小时前
Java类变量(静态变量)
java·开发语言·jvm