HTMLに別のHTMLファイルをincludeする方法【jQuery使用】

HTMLに別のHTMLファイルをincludeする方法【jQuery使用】 HTML

HTMLには別のファイルをincludeして使う機能はないですがjQueryを使えばそれっぽいことはできます。

今回はHTMLの共通部分を外部HTMLに切り出して読み込む方法を紹介します。

 

ただし、HTMLの一部を外部化してjQueryでincludeするのはあまりオススメしません。というのも、HTMLって本来そうやって使うものではないと思うんですよね。

pugやejsが使える環境ならinclude機能が使えるし、PHPが使える環境でも外部化して読み込むことはできます。

あくまでも「開発環境が使えず」「どうしても外部化する必要がある」という場合だけincludeする方法を検討してください。

数ページ程度ならincludeせずにベタ書きしたほうが個人的にはいいと思います。そのほうが本来のHTMLの書き方に則ってるし、他の人がコードを見たときもわかりやすいはずです。

 

スポンサーリンク

HTMLに別のHTMLファイルをincludeする方法

今回はヘッダーを外部化してjQueryでincludeしてみます。

使用するファイルは3つです。

  • index.html:メインのHTMLファイル
  • header.html:外部化したヘッダー
  • include.js:include処理をするjsファイル

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="include.js"></script>
</head>
<body>
  <p>index.htmlです</p>
</body>
</html>

index.htmlはいたって普通です。jQueryとinclude.jsを読み込んでおくことくらいですね。

このファイルの<body>直下にヘッダーをincludeします。

 

header.html

<header>
  <p>これがheaderです</p>
</header>

header.htmlは外部化されたヘッダーです。これをindex.htmlにincludeして表示させます。

 

include.js

$(function() {
  $.ajax({
    url: 'header.html', // includeしたいファイルのパスを指定
    dataType: 'html', // htmlのまま
    // 読み込み成功時の処理
    success: function (data) {
      $('body').prepend(data);
    },
    // 読み込み失敗時の処理
    error: function () {
      alert('header error!');
    },
  });
});

includeは$.ajax()を使って行います。ページ読み込み時に指定したファイルが指定の場所に出力されます。

url:はこのjsファイルを基準にしたパスで指定します(このjsを読み込んでいるHTMLが基準ではないです)。パスの記述ミスなどではまらないようにerorr:に何か書いておくとわかりやすいです。

dataType:は読み込むファイルのタイプです。jsonならjson、テキストファイルならtextみたいな感じで色々読み込めるみたいです。今回はHTMLを読み込むのでhtmlと書けばok。

成功時の処理はsuccess:に関数で渡せます。引数dataには読み込んだファイル(今回ならheader.html)がそのまま入っています。関数内の処理は自由に書けるので好きな場所に出力したり、他の処理を書いてもokです。今回は<body>直下に出力する処理をしています。

読み込みに失敗した時の処理はerror:に書きます。alert()とか書いておくとエラーに気付きやすいですね。

 

なお、$.ajax()ではなくload()を使ったほうがシンプルに書けますが、HTML側で空の要素を作る必要があったり「特定の要素の何番目以下に入れる」といった細かい指定ができないので、$.ajax()を使うほうが融通が利くと思います。

 

動作確認はローカルサーバーで

ajaxはhtmlファイルをそのまま開く形で確認しても動作しません。

なので手っ取り早く確認したい場合はPHPのビルトインサーバーを使うのがいいんじゃないかなと思います。

やり方は以下の記事で解説しているのでわからない人はどうぞ。

【超簡単】PHPのビルトインサーバーを使ってローカルサーバーを立てる方法

 

まとめ

pugやejs、PHPが使えればベストですが、それ以外の方法だとSSI(Server Side Includes)という、サーバーの設定をいじることでHTMLでincludeできるようにする方法もあるみたいです。詳しくは各自で調べてくださいm(__)m

まあ勝手にサーバーの設定を変更できない案件も結構あると思うので、その場合は今回紹介した方法が妥当かなって感じです。

あまり積極的には使って欲しくないですが、どうしてもincludeにする必要があるという場合は検討してみてください。