事件 - htmx:historyCacheMissLoad

htmx:historyCacheMissLoad 是 HTMX 在浏览器前进 / 后退操作中，如果命中的是历史记录 URL，但 HTMX 无法从缓存中恢复该页面状态，于是它会自动从服务器重新加载该 URL 内容，并在加载完成后触发这个事件。

举例说明：

你在使用 hx-push-url="true" 时：

1. 点击链接加载 /page1 → 内容加载并缓存

2. 点击链接加载 /page2 → 内容加载并缓存

3. 刷新或跳转到其他页面 → HTMX 缓存丢失

4. 回退到 /page1 → 缓存失效

5. HTMX 从服务器重新加载 /page1

6. 加载完毕后触发：htmx:historyCacheMissLoad

事件参数

• detail.xhr - XMLHttpRequest
• detail.path - 正在恢复的页面的路径和查询

与其它历史事件的关系

事件名	含义
htmx:historyCacheMiss	找不到缓存（触发时还没加载内容）
htmx:historyCacheMissLoad	已加载丢失缓存的 URL，并成功插入
htmx:replacedInHistory	页面状态被历史记录替换
htmx:pushedIntoHistory	页面状态被推入历史记录

示例代码

<a hx-get="/page1" hx-target="#main" hx-push-url="true">加载 Page 1</a>
<a hx-get="/page2" hx-target="#main" hx-push-url="true">加载 Page 2</a>

<div id="main">
  初始内容
</div>
<script>
  document.body.addEventListener("htmx:historyCacheMissLoad", function(evt) {
    console.log("页面缓存丢失，内容已从服务器重新加载！");
    console.log("加载 URL：", evt.detail.path);
  });
</script>