【jQuery】htmlページをパーツごとに分けて読み込む方法 - 自動化厨のプログラミングメモブログ │ CODE:LIFE

この記事でできるようになること

ヘッダー、フッターなどの共通部分のHTMLを別ファイルとして管理
切り出したHTMLファイルをjQueryで動的に読み込む

PHPなしで制作するWEBページは管理が煩雑になりがち

HTMLでホームページを構築する際に気をつけたいのが作ったあとのメンテナンス。何にも考えずにガシガシ書いてるとあとあと更新するのが大変なんです。例えばヘッダーについてるグローバルメニューをカスタムした時には、グローバルメニューが入ってるページ全てを更新しなければならず大変な手間。

ヘッダー部分だけ全ページ共通で読み込ませることができれば楽だと思いませんか？

インラインフレームはレスポンシブデザインで使いづらい

インラインフレームで読み込む方法も良いかもしれませんが、今回の案件ではレスポンシブデザインということでフレーム読み込みは断念。高さの自動調整を実装するのも面倒ですし。データベースの扱えるサーバーならばPHPでヘッダーやサイドバーなどを読み込むのがスマートな方法なのですが、ECサイト（楽天やYahoo!ショッピング）などのサーバーサイド言語が扱えないような状況では出来ない芸当。

以下の条件のもと行き着いたのが今回紹介する方法です。

レスポンシブ対応
ヘッダーやフッターなどは全て共通化したい
PHPは使えない

jQueryのloadメソッドでhtmlを読み込む

いろいろ調べてみた結果行き着いたのはjQueryのloadメソッドでした。

楽天のGOLDやYahoo!ショッピングのトリプルは JavaScriptが使用可能なので使える！

この方法の概要としてはindex.html内のパーツを読み込みたい場所に、別途用意した「header.html」などを追記するというもの。

index.htmlを完成させる
共通パーツを切り分ける
読み込み用のscriptを記述

の手順で行うのがオススメ。

1. まずは普通にindex.htmlを作ろう

<!DOCTYPE HTML>
<html lang="ja">
<head>
</head>
<body>
<div id="header">
タイトルロゴや画像<br>
グローバルメニューなど
</div>

<div id="side">
サイドバー<br>
検索バーやカテゴリーリストなど
</div>

<div id="main">
メインコンテンツは直接記述
</div>

<div id="footer">
サイトのSNS情報や<br>
コピーライトなど
</div>

</body>
</html>

2. 共通パーツを切り分ける

※htmlとして保存する際にはやなどは不要。そのままコピペするだけでOKです。

header.html

   <div id="header">
タイトルロゴや画像<br>
グローバルメニューなど
</div>

<div id="header">の中身をコピーしてheader.htmlとして保存

side.html

   <div id="side">
サイドバー<br>
検索バーやカテゴリーリストなど
</div>

<div id="side">の中身をコピーしてside.htmlとして保存。

footer.html

   <div id="footer">
サイトのSNS情報や<br>
コピーライトなど
</div>

<div id="footer">の中身をコピーしてfooter.htmlとして保存。

3. index.htmlに各パーツを読み込むscriptを記述

head内にjQueryを読み込む

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>

loadメソッドで各パーツを読み込む

<script>
//共通パーツ読み込み
 $(function() {
 $("#header").load("header.html");
 $("#side").load("side.html");
 $("#footer").load("footer.html");
});
</script>

これでそれぞれID指定した箇所にパーツとなるhtmlがそのまま読み込まれます。

完成形

<!DOCTYPE HTML>
<html lang="ja">
<head>
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
//共通パーツ読み込み
  $(function() {
       $("#header").load("header.html");
       $("#side").load("side.html");
       $("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header">
ここにheader.htmlが読み込まれる
</div>

<div id="side">
ここにside.htmlが読み込まれる
</div>

<div id="main">
メインコンテンツは直接記述
</div>

<div id="footer">
ここにfooter.htmlが読み込まれる
</div>

</body>
</html>