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

相关推荐
半旧5189 分钟前
重构谷粒商城01:为何重构谷粒商城
java·后端·全栈·项目·谷粒商城
小小渔民12 分钟前
Redis持久化机制详解
java·redis
m0_7482515212 分钟前
芋道源码(无遮羞布版)Spring Boot 全景指南
java·spring boot·后端
大明湖的狗凯.16 分钟前
Java设计模式——责任链模式与策略模式
java·设计模式·责任链模式
火烧屁屁啦23 分钟前
【JavaEE进阶】Spring IoC
java·spring·java-ee
Leen23 分钟前
Java核心知识点全解析 | 从青铜到王者的编程之路
java·后端·面试
一名普通的程序员27 分钟前
在spring boot 项目中远程调用时,如果使用subList()方法报错原因分析
java·spring boot·后端
兀行者(做个有情怀的java程序员)27 分钟前
ArrayList和LinkedList有什么区别?在什么情况下使用ArrayList更高效?
java·开发语言
大G哥30 分钟前
Java中有100万个对象,用list map泛型存储和用list对象泛型存储,那个占用空间大,为什么...
java·开发语言·数据结构·windows·list
m0_748233881 小时前
JAVA程序员面试总结
java·开发语言·面试