読者です 読者をやめる 読者になる 読者になる

CODE-LIFE│コーディング・プログラミングのメモブログ

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ

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

最近仕事で使った方法なのですが、今時はあまり使われないかも。

 

htmlでホームページを構築する際に気をつけたいのが「作ったあとのメンテナンス」

何にも考えずにガシガシ書いてるとあとあと更新するのが大変なんです。

 

例えばヘッダーについてるグローバルメニューをカスタムした時には、グローバルメニューが入ってるページ全てを更新しなければならず大変な手間。

 

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

 

インラインフレームで読み込む方法も良いかもしれませんが、今回の案件ではレスポンシブデザインということでフレーム読み込みは断念。

 

データベースの扱えるサーバーならばPHPでヘッダーやサイドバーなどを読み込むのがスマートな方法なのですが、

ECサイト楽天Yahoo!ショッピング)などでは出来ない芸当。

 

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

 

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

 

 

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

いろいろ調べてみた結果行き着いたのはjQueryでした。

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

 

この方法の概要としては

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

 

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

 

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

 

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

 

次に共通パーツを切り分ける

<div id="header"></div>

のなかみをコピーしてheader.htmlとして保存。

 

<div id="side"></div>

のなかみをコピーしてside.htmlとして保存。

 

<div id="footer"></div>

のなかみをコピーしてfooter.htmlとして保存。

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

 

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

<head>内にjQueryを読み込む

<script src="js/jquery.min.js"></script>

 

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

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

 

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

 

以下が完成形

 

 

注意点

JavaScriptでページを読み込んでくる際に注意すべき点があります。

それは各パーツに適用するJavaScriptの実行順序。

 

例えばheaderのグローバルメニューなんかはこだわってプルダウンメニューにしたかったりしますよね。

 

その時に使うのもやはりjQuery。そこで起きるのが

 

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

実行順序によってはページが読み込まれる前にグローバルメニューのjQueryが実行されてしまい。メニューが機能しない なんてことがあります。

 

というか今回ありました。

 

この対策もきちんとメモしておきます!

 

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

 

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

 

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

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

 

 

まとめ

全ページ出来上がってからやると大変だから早い段階で共通パーツ化しちゃったほうがいいですよ!

わからないことやもっといい方法があったらコメントください!