htmx Head 標籤支援擴充功能

head-support 擴充功能為 htmx 請求的回應增加對 head 標籤的支援。

htmx 最初是一個專注於在 body 標籤內部分替換 HTML 的函式庫。因此，合併額外資訊（例如 head 標籤）並非該函式庫的重點。（這與例如 TurboLinks 不同，TurboLinks 專注於將通過 AJAX 檢索的整個網頁合併到瀏覽器中。）

hx-boost 屬性使 htmx 更接近完整 HTML 文件支援的世界，並且最終增加了從 head 元素中提取 title 標籤的支援，但完整的 head 標籤支援從未成為該函式庫的功能。此擴充功能解決了這個缺點。

安裝

<script src="https://unpkg.com/htmx-ext-head-support@2.0.1/head-support.js"></script>

使用方式

<body hx-ext="head-support">
...
</body>

安裝此擴充功能後，所有 htmx 接收到的包含 head 標籤的回應（即使它們不是帶有根 <html> 元素的完整 HTML 文件）都將被處理。

head 標籤的處理方式取決於 htmx 請求的類型。

如果 htmx 請求來自被提升（boosted）的元素，則會使用以下合併演算法

當前 head 中存在的、與文字完全匹配的元素將保持原位
當前 head 中不存在的元素將被添加到 head 標籤的末尾
當前 head 中存在、但新 head 中不存在的元素將從 head 中刪除

如果 htmx 請求來自未被提升的元素，則所有內容都將附加到現有的 head 元素中。

如果您希望在任何一種情況下覆蓋此行為，您可以在新的 <head> 標籤上放置 hx-head 屬性，並使用以下兩個值之一

merge - 遵循上述合併演算法
append - 將元素附加到現有的 head

控制合併行為

除此之外，您也可以使用以下屬性控制個別元素的合併行為

如果在 head 元素上放置 hx-head="re-eval"，它將在每次請求時重新添加（刪除並附加）到 head 標籤，即使它已存在。例如，這對於在每次 htmx 請求時執行腳本很有用。
如果在元素上放置 hx-preserve="true"，它將永遠不會從 head 中刪除

範例

舉例來說，考慮現有文件中以下 head 標籤

<head>
<link rel="stylesheet" href="https://the.missing.style">
<link rel="stylesheet" href="/css/site1.css">
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
</head>

如果 htmx 收到包含這個新 head 標籤的請求

<head>
<link rel="stylesheet" href="https://the.missing.style">
<link rel="stylesheet" href="/css/site2.css">
<script src="/js/script2.js"></script>
<script src="/js/script3.js"></script>
</head>

然後將發生以下操作

<link rel="stylesheet" href="https://the.missing.style"> 將保持不變
<link rel="stylesheet" href="/css/site1.css"> 將從 head 中移除
<link rel="stylesheet" href="/css/site2.css"> 將添加到 head 中
<script src="/js/script1.js"></script> 將從 head 中移除
<script src="/js/script2.js"></script> 將保持不變
<script src="/js/script3.js"></script> 將添加到 head 中

最終的 head 元素將如下所示

<head>
<link rel="stylesheet" href="https://the.missing.style">
<script src="/js/script2.js"></script>
<link rel="stylesheet" href="/css/site2.css">
<script src="/js/script3.js"></script>
</head>

事件

此擴充功能會觸發以下事件

htmx:removingHeadElement - 當 head 元素即將被移除時觸發，被移除的元素可在 event.detail.headElement 中取得。如果在事件上調用 preventDefault()，則該元素將不會被移除。
htmx:addingHeadElement - 當 head 元素即將被添加時觸發，被添加的元素可在 event.detail.headElement 中取得。如果在事件上調用 preventDefault()，則該元素將不會被添加。
htmx:afterHeadMerge - 在 head 標籤合併發生後觸發，事件的 detail 中提供以下值
added - 已添加的 head 元素
kept - 保留的 head 元素
removed - 已移除的 head 元素
htmx:beforeHeadMerge - 在 head 合併發生前觸發