事件 - htmx:historyRestore

当 htmx 处理历史记录恢复操作时触发此事件，这个事件只在 HTMX 的历史管理（hx-push-url）启用时生效。

事件参数

  • detail.path - 正在恢复的页面的路径和查询
  • detail.cacheMiss- 设置true恢复是否为缓存未命中
  • detail.serverResponse- 缓存未命中时响应文本被替换
  • detail.item- 通过缓存命中恢复的缓存详细信息

示例代码

<body>

<h2>文章列表</h2>
<ul>
  <li><a href="/article/1" hx-get="/article/1" hx-target="#content" hx-push-url="true">文章一</a></li>
  <li><a href="/article/2" hx-get="/article/2" hx-target="#content" hx-push-url="true">文章二</a></li>
</ul>

<hr>

<div id="content">
  <p>点击上面的文章标题加载内容。</p>
</div>

<script>
  document.body.addEventListener("htmx:historyRestore", function(evt) {
    console.log("历史记录已恢复，当前URL为:", window.location.pathname);
    // 可选：显示一个小提示或恢复滚动位置等
  });
</script>

</body>

  • 用户点击“文章一”，内容加载到 #content 中，URL 变为 /article/1。

  • 用户点击“文章二”，内容变为第二篇，URL 变为 /article/2。

  • 用户点击浏览器“后退”按钮，回到 /article/1，触发 htmx:historyRestore。

  • 控制台输出日志，你也可以做恢复操作。

注意事项

  • htmx:historyRestore 只在你使用了 hx-push-url 时才有意义。

  • 如果你不希望 HTMX 接管历史，你可以设置 hx-push-url="false"。

  • 事件对象中可以访问到详细信息：evt.detail.path, evt.detail.cacheMiss, 等。