共通部分をパーツ化させる

ページ数の多いサイトとか共通部分に修正があると作業に手間がかかったりしますよね。
作った後のメンテナンス、更新。めんどくさいですね。

私はページ数の多いサイトを作るときは出来るだけ共通部分をパーツ化させて読み込ませています。
その方が後々楽だからです。更新も修正も共通部分1か所直せばすべて直るんですから。ちゃんと楽はしないとね。

ssi使っているならincludeしたり、データベースを扱える環境ならPHPでincludeするのがスマートですが、
クライアントのサーバー情報が分からない場合やECサイト（楽天やYahoo!ショッピング）で導入できないので、その場合はjQueryを使って読み込みます。

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>共通部分をパーツ化させる</title>
  <script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $(".l_header").load("_inc/header.html");
      $(".l_footer").load("_inc/footer.html");
    });
  </script>
</head>

<body>
  <header class="l_header">
    <!--ここに header.htmlが読み込まれる-->
  </header>
  <!-- /l_header -->
  <div class="l_main">

  </div>
  <!-- /l_main -->
  <footer class="l_footer">
    <!--ここに footer.htmlが読み込まれる-->
  </footer>
  <!-- /l_footer -->
</body>

</html>

jQueryを使うので、あらかじめ読ませておきます。

注意！

例えばグローバルメニューを共通部分化させた時に、メニュー部分にドロップダウンなどのエフェクトをjQueryで付けたとしますよね。しかしそのときloadメソッドで読み込んだページのドロップダウン用jQueryが機能しない問題が起こったりします。
私も苦しめられました(´･ω･`)

loadメソッドで読み込んだページより前に、グローバルメニューのドロップダウン用jQueryが早く実行されてしまったんです。

解決方法は
パーツのhtmlの方にエフェクト用のscriptを記述してしまうことです！
例えばloadメソッドでmenu.htmlを読み込むとして、menu.html内に直接エフェクト用のscriptを記述します。
そうすればmenu.htmlがloadされてからエフェクト用のjQueryが起動します。

いやもうホントにこれ解決するのに1時間潰しました。

注意！

Related article