htmxのhx-getでパーツ読み込みをした際のtitleタグ置き換えを防止する方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

エキサイトホールディングス Advent Calendar 2024 シリーズ1の16日目を担当します。

qiita.com

今回は、htmxのhx-getでパーツ読み込みをした際に、読み込み元のtitleタグが置き換わってしまう現象を防ぐ方法をご紹介します。

hx-getでパーツ読み込み？
発生する現象
どうやって解決するか
- index.html
- 結果
まとめ

hx-getでパーツ読み込み？

htmxでは、テンプレートエンジンのように、他のHTMLファイルにある要素をパーツとして読み込むことが可能です。

htmxやパーツ読み込みの方法については、以下の記事をご参照ください。

tech.excite.co.jp

発生する現象

例えば以下のコードでindex.htmlにて/parts/index.htmlの#partsを読み込んだとします。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>トップページ</title>

    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
</head>
<body>

    <!-- 自要素を`/parts/index.html`の`#parts`に置き換え -->
    <div
    hx-get="/parts/"
    hx-select="#parts"
    hx-trigger="load"
    hx-target="this"
    hx-swap="outerHTML"></div>

</body>
</html>

/parts/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>パーツ</title>

    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
</head>
<body>

    <!-- 呼び出される要素 -->
    <div id="parts">...</div>

</body>
</html>

index.htmlを表示したときのtitle

この状態でindex.htmlをブラウザで読み込むと、titileタグが置き換わってしまい、「トップページ」となってほしいところが「パーツ」になってしまいます。

どうやって解決するか

titleタグの置き換えを防止したい場合は、レスポンスで受け取った要素をどう扱うかを処理するhx-swapに、ignoreTitle:trueを付与します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>トップページ</title>

    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
</head>
<body>

    <!-- `hx--swap`に`ignoreTitle:true`を追加 -->
    <div
    hx-get="/parts/"
    hx-select="#parts"
    hx-trigger="load"
    hx-target="this"
    hx-swap="outerHTML ignoreTitle:true"
    ></div>

</body>
</html>