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

相关推荐
Java微观世界2 小时前
匿名内部类和 Lambda 表达式为何要求外部变量是 final 或等效 final?原理与解决方案
java·后端
SimonKing2 小时前
全面解决中文乱码问题:从诊断到根治
java·后端·程序员
你三大爷2 小时前
再探volatile原理
java
2301_781668612 小时前
Redis 面试
java·redis·面试
郑洁文2 小时前
基于SpringBoot的天气预报系统的设计与实现
java·spring boot·后端·毕设
沃夫上校3 小时前
MySQL 中文拼音排序问题
java·mysql
Dcs3 小时前
用 Python UTCP 直调 HTTP、CLI、MCP……
java
快乐肚皮3 小时前
fencing token机制
java·fencing token
叶落阁主3 小时前
Neovim 插件 i18n.nvim 介绍
java·vue.js·vim
渣哥4 小时前
让集合线程安全的几种靠谱方法
java