https://www.irric.co.jp/js/include.js

1/**
2 * data-include属性を持つ要素に、指定したHTMLファイルを読み込んで差し込みます。
3 * インクルードのネストも可。
4 */
5async function loadHtmlIncludes(root = document) {
6  // data-include があり、まだ処理していない要素（data-include-loaded="true"）以外を対象にする
7  const targets = Array.from(
8    root.querySelectorAll('.js-include[data-include]:not([data-include-loaded="true"])')
9  )
10
11  // 対象がなければ何もせず終了
12  if (targets.length === 0) return;
13
14  // 全ターゲットを並列で処理する
15  await Promise.all(
16    targets.map(async (el) => {
17      const url = el.dataset.include;
18      if (!url) return;
19
20      // ブラウザ標準のHTTPキャッシュに従う
21      let cacheMode = 'default';
22
23      try {
24        const response = await fetch(url, { cache: cacheMode });
25
26        if (!response.ok) {
27          throw new Error(`Failed to fetch ${url}: ${response.status}`);
28        }
29
30        el.innerHTML = await response.text();
31
32        // 2回目以降に再処理しないようフラグを付与
33        el.dataset.includeLoaded = 'true';
34
35        // この要素の中に、さらにdata-includeがあれば処理を行う
36        await loadHtmlIncludes(el);
37      } catch (error) {
38        console.error('[loadHtmlIncludes] include failed:', url, error);
39      }
40    })
41  );
42}
43
44// ページ読み込み完了時にインクルードを実行、完了後にカスタムイベントを発火
45document.addEventListener('DOMContentLoaded', () => {
46  // 初回のインクルード処理の実行
47  loadHtmlIncludes()
48    .catch((error) => {
49      // loadHtmlIncludes自体がrejectした場合
50      console.error('[loadHtmlIncludes] top-level error:', error);
51    })
52    .finally(() => {
53      // カスタムイベント：すべてのインクルード処理（対象がない場合も含む）が終わったことを通知
54      window.dispatchEvent(new Event('js-includes-loaded'));
55    });
56});