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

相关推荐
可问 可问春风1 小时前
Spring MVC 核心组件详解
java·spring·mvc
好奇的菜鸟2 小时前
在IDEA中连接达梦数据库:详细配置指南
java·数据库·intellij-idea
山海不说话2 小时前
从零搭建微服务项目Pro(第2-2章——JSR303自定义文件校验+整合至微服务公共模块)
java·spring boot·后端·spring·微服务
Cloud_.2 小时前
Apifox Helper 自动生成API接口文档
java·ide·intellij-idea
知识浅谈4 小时前
@Validate 注解的使用-分组案例很有用
java·springboot
Trouvaille ~4 小时前
【Java篇】一法不变,万象归一:方法封装与递归的思想之道
java·开发语言·面向对象·javase·递归·方法·基础入门
Zhava4 小时前
MybatisPlus中的customSqlSegment动态拼接where条件
java·mybatis
极客先躯5 小时前
高级java每日一道面试题-2025年2月26日-框架篇[Mybatis篇]-Mybatis是如何将sql执行结果封装为目标对象并返回的?都有哪些映射形式 ?
java·mybatis·嵌套映射·resulttype属性·resultmap属性·results注解·列名别名
qq_529835355 小时前
Java实现死锁
java·开发语言·python
牧小七5 小时前
Java --- 根据身份证号计算年龄
java·开发语言