1. Show HN: htmz – a low power tool for HTML (leanrada.com)
htmz:一个轻量级HTML交互工具
htmz 是一个极简的HTML微框架,旨在利用纯HTML的熟悉简洁性,创建交互式、模块化的Web用户界面。
核心理念与特点
- 纯HTML:直接使用原生HTML,无需任何超集、特殊属性(如
hx-、ng-等)、领域特定语言或自定义元素。 - 轻量级:总体积仅166字节,零依赖,无需加载JavaScript包,甚至无需后端支持,只需一个内联的HTML代码片段。
- 无过滤器:不干预浏览器默认行为,操作真实DOM,没有虚拟DOM、点击监听器或AJAX/Fetch请求的抽象层,避免了“重新发明浏览器”。
工作原理
htmz 的核心功能非常单一:根据请求,将HTML片段加载到页面上的任意元素中。它通过一个名为 htmz 的隐藏 iframe 实现。当用户点击带有 target=htmz 的链接或表单时,请求的URL会在该 iframe 中加载。加载完成后,onload 事件处理器会从URL的片段标识符(# 后部分)中提取目标元素的选择器,并用 iframe 中新加载的内容替换该目标元素。
基本使用示例:
<!-- 点击链接后,会加载 /flower.html 的内容,并替换掉页面中 ID 为 my-element 的元素 -->
<a href="/flower.html#my-element" target=htmz>Flower</a>
安装与使用
安装:最简单的方式是将以下代码片段复制到HTML页面中:
<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>
也支持通过 npm (npm install --save-dev htmz) 或使用其提供的命令行工具进行安装。
高级用法:
- 按按钮设置不同动作:可以在表单中的不同
<button>元素上使用formaction属性来覆盖表单的默认动作。 - 设置默认目标:使用
<base target=htmz>标签可以将所有相对链接的默认目标设置为 htmz。 - 清理目标值:可以通过修改代码片段,实现将目标选择器直接写在
target属性中(如target="#my-element"),需要配合为每个目标创建一个同名的隐藏iframe。 - 支持新标签页打开:可以通过服务器端的
Sec-Fetch-Dest请求头来判断是否为直接访问,从而决定返回完整的页面还是片段。 - 脚本与交互:htmz 不排斥JavaScript。当需要更复杂的交互时,可以使用JavaScript来增强特定控件,同时仍可利用htmz处理表单提交等。
设计思想与定位
htmz 是对HTML框架(如 <iframe>, <frame>)的现代泛化,允许在页面的任何元素中加载HTML资源。它灵感来源于 htmx 等项目,但旨在以更轻量、更贴近原生HTML的方式实现类似功能。
- 本质:它是一个代码片段,而非传统的库或框架。
- 扩展性:可以修改和扩展其核心代码片段以实现更高级的功能,如错误处理、多目标更新等,社区也提供了预写的扩展。
- 命名含义:HTMZ 代表 “Html with Targeted Manipulation Zones”(带有目标操作区域的HTML)。
- 主要限制:
- 每个响应默认只能有一个目标元素(可通过扩展解决)。
- 基于传统的请求-响应模型(Web 1.0),每次交互都需要一次网络往返。
- 它并非模板库,不提供客户端的HTML导入或包含功能。
htmz 是一个实验性工具,旨在证明用极少的代码即可在现代浏览器中实现基于HTML片段的部分页面更新,其强大能力主要来源于浏览器本身的原生功能。