自動化厨のプログラミングメモブログ│CODE-LIFE

Python/ExcelVBA/JavaScript/Raspberry Piなどで色んなことを自動化

【jQuery】htmlページをパーツごとに分けて読み込む方法

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. index.htmlを完成させる
  2. 共通パーツを切り分ける
  3. 読み込み用の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>

loadメソッドで読み込んだページでjQueryが機能しない問題

JavaScriptでページを読み込んでくる際に注意すべき点があります。それは各パーツに適用するJavaScriptの実行順序。 例えばheaderのグローバルメニューなんかはこだわってプルダウンメニューにしたかったりしますよね。

その時に使うのもやはりjQuery。そこで起きるのがこの問題。 実行順序によってはページが読み込まれる前にグローバルメニューのjQueryが実行されてしまい。 メニューが機能しないなんてことがあります。というか今回ありました。

対策方法

実行順序を考えてページ読み込み完了後に指定して・・・・っていう方法もあるにはあるがめんどくさい。

一番簡単な方法はパーツのhtmlの方にscriptを記述してしまうこと。

こうすればパーツを読み込まれる前に実行されることは無いので確実にパーツ内のhtmlにjQueryを適用できます。

(ここに行き着くのに1時間ほど悩みました (´・ω・`))