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

相关推荐
飛_21 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
木棉软糖3 小时前
一个MySQL的数据表最多能够存多少的数据?
java
程序视点3 小时前
Java BigDecimal详解:小数精确计算、使用方法与常见问题解决方案
java·后端
愿你天黑有灯下雨有伞3 小时前
Spring Boot SSE实战:SseEmitter实现多客户端事件广播与心跳保活
java·spring boot·spring
Java初学者小白4 小时前
秋招Day20 - 微服务
java
狐小粟同学5 小时前
JavaEE--3.多线程
java·开发语言·java-ee
KNeeg_5 小时前
Spring循环依赖以及三个级别缓存
java·spring·缓存
AI_Gump6 小时前
【AI阅读】20250717阅读输入
java·spring boot·spring
找不到、了7 小时前
Java排序算法之<插入排序>
java·算法·排序算法
设计师小聂!7 小时前
力扣热题100----------53最大子数组和
java·数据结构·算法·leetcode