事件 - htmx:beforeOnLoad

htmx:beforeOnLoad 是 HTMX 在收到响应数据之后、但在将其插入页面之前触发的事件。如果取消此事件，则不会发生交换。

你可以在此事件中：

• 修改服务器返回的 HTML 内容；

• 审查或拦截即将插入页面的内容；

• 甚至阻止默认插入行为（可调用 event.preventDefault()）；

事件参数

• detail.elt - 发送请求的元素
• detail.xhr - XMLHttpRequest
• detail.target - 请求的目标
• detail.requestConfig - AJAX请求的配置

示例：修改要插入的内容

<div id="result"></div>

<button hx-get="/message" hx-target="#result" hx-swap="innerHTML">
  加载消息
</button>

<script>
  document.body.addEventListener("htmx:beforeOnLoad", function (event) {
    // 直接修改服务器返回的内容
    let content = event.detail.content;

    // 比如你想添加一段注释或包裹一下返回内容
    event.detail.content = `<div class="wrapped">${content}<p class="footer">-- 加载完毕 --</p></div>`;

    console.log("修改后的内容：", event.detail.content);
  });
</script>