事件 - htmx:pushedIntoHistory

htmx:pushedIntoHistory 是 HTMX 的一个事件，在页面触发了历史记录推入（pushState）时触发。

也就是说，当你使用了 hx-push-url="true" 或使用了 HX-Push_Url="some path"时，HTMX 在 AJAX 请求成功、并将新地址加入浏览器历史记录时，就会触发这个事件。

事件参数

• detail.path - 已推送到历史记录的 URL 的路径和查询

使用场景

• 在 URL 被推入浏览器历史栈时执行一些额外逻辑

• 自定义记录页面导航轨迹（比如用于打点或调试）

• 显示“你已进入 X 页面”的提示

• 与页面状态或标题联动（更新 <title>、面包屑导航等）

示例代码

<h2>产品列表</h2>
<ul>
  <li><a href="/product/1" hx-get="/product/1" hx-target="#content" hx-push-url="true">DDOS防护</a></li>
  <li><a href="/product/2" hx-get="/product/2" hx-target="#content" hx-push-url="true">云安全防护</a></li>
</ul>

<hr>

<div id="content">
  <p>点击上方产品名称，加载详情并推入浏览器历史记录。</p>
</div>

<script>
  document.body.addEventListener("htmx:pushedIntoHistory", function(evt) {
    console.log("已将 URL 推入历史记录:", window.location.pathname);

    // 可执行额外逻辑，比如修改标题
    document.title = "当前页面：" + window.location.pathname;
  });
</script>

用户点击“DDOS防护”，HTMX 发送请求，加载 /product/1 的内容到 #content。因为设置了 hx-push-url="true"，HTMX 会执行 history.pushState()。浏览器地址栏会改变，不刷新页面。此时自动触发 htmx:pushedIntoHistory 事件，你可以在里面写自定义逻辑。