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

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

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

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

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

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

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

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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

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

htmlファイルをまるごと読み込む方法

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

head.html

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

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

index.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>
未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

javascript jQuery
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました