【load】別ページのhtmlを読み込ませて表示させたい

今回は別のページにあるhtmlを読み込ませたいときの方法について紹介します。

たとえば共通のヘッダーやフッターの修正が入ったりしたらページごとに修正するのはとても大変だと思います。

CMSを使えばテンプレートごとに分かれていてそれぞれのテンプレートを呼び出すことgが容易ですがもしテンプレート化されていないサイトだと修正が入ると全ページ修正が必要になってしまいます。

そこで呼び出したいhtmlを一つ作っておき読み込みたいページ

他のページからhtmlを読み込む方法としてajaxとjqueryのloadを使う方法があります。

今回はjqueryのloadを使う方法を紹介します。

loadを使うことで同一のドメインのページからhtmlを引っ張ってくることができます。

loadを使ってファイルや要素を読めこむ方法

まずhead.htmlというファイルにヘッダーとナビゲーションの要素が入っているとします。

<header>
/*ヘッダー要素*/
</header>
<nav>
/*ナビゲーション要素*/
</nav>

head.htmlにあるヘッダーの要素を別ページ（index.html）で表示させたいときはloadを使用してhead.htmlを読みこみます。

<div class="header"></div>

<script>
$(function(){
  $("header").load("head.html");
});
</script>

これで<div class=”header”>の中にhead.htmlの内容が読み込まれます。

index.html

<div class="header"></div>

<script>
$(function(){
$("#box").load(haed.html header);
});
</script>