はじめに

ページ数の多いウェブサイトを作る機会があり保守性を考えてヘッダーを共通化しとこうと思い今回の内容をめも。 データベースが扱える環境ならPHPでincludeする方法がスマートだしやり方は様々ですが、使えない環境もあるので今回はjQueryのload()を選びました。

使っていく

  • まずはjQueryを読み込ませる。ない場合はこちらからダウンロード
  • index.htmlと同じ階層に任意のディレクトリ(今回はinclude)を作成し、その中に共通化したいヘッダを作成(今回はheader.html)
  • jQueryの読み込み処理を記述(今回は見やすいようにhead内に直接書いてます)
  • クラスを使い呼び出したいファイルを指定
そうするとこんな感じになります。 ▼index.html
<html>
  <head>
    <meta charset="utf-8">
    <title>ヘッダーをパーツ化させる</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
      $(".load_header").load("include/header.html");
    });
    </script>  
  </head>
  <body>
    <header class="load_header">
      <!--ここに header.htmlが読み込まれます-->
    </header>
  </body>
</html>

ローカルで確認する

ここで問題発生です。 ローカルで確認すようとすると以下のエラーが出てしまいます。そうですよね、CORSさん。
CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
以下の方法でChromeを起動するとローカルでも確認できました。
sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

ハマった点

僕の場合、共通化したヘッダーの中にスマホ用ナビボタンのクリックアクションをjQueryで実行していたのですが、なぜかそれが機能しない問題が生じました。 どうやらloadメソッドで読み込んだページよりも前にクリックアクション用のjQueryが実行されていたのが原因。 header.htmlに直接クリックアクション用のスクリプトを記述することで対応できました。

参考ページ

https://style01.net/399/ https://qiita.com/exp/items/ac651c452afb374e7e23