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

相关推荐
HoneyMoose6 小时前
Jenkins Cloudflare 部署提示错误
java·servlet·jenkins
阿丰资源7 小时前
基于SpringBoot的物流信息管理系统设计与实现(附资料)
java·spring boot·后端
Predestination王瀞潞7 小时前
Java EE3-我独自整合(第四章:Spring bean标签的常见配置)
java·spring·java-ee
overmind7 小时前
oeasy Python 121[专业选修]列表_多维列表运算_列表相加_列表相乘
java·windows·python
资深数据库专家7 小时前
总账EBS 应用服务器1 的监控分析
java·网络·数据库
房开民7 小时前
可变参数模板
java·开发语言·算法
t***5447 小时前
如何在现代C++中更有效地应用这些模式
java·开发语言·c++
_深海凉_7 小时前
LeetCode热题100-最小栈
java·数据结构·leetcode
不知名的忻7 小时前
Morris遍历(力扣第99题)
java·算法·leetcode·morris遍历
daidaidaiyu7 小时前
一文学习入门 ThingsBoard 开源物联网平台
java·mqtt·spring