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

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

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

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

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

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

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

HTMLに別のHTMLファイルをincludeする方法
動作確認はローカルサーバーで
まとめ

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()を使うほうが融通が利くと思います。