jQueryの.load()でhtmlが表示されない場合の対処方法

あれー？jQueryのload()を使ってHTMLのパーツを読み込みたいのに読み込めないぞ…。なんでだー？

今回の記事では上記の疑問にお答えします。

結論

jQueryのload()はローカル環境では機能しません。必ずサーバーにアップロードしてから動作チェックを行いましょう。

jQueryのload()メソッドとは

load()とは、jQueryで使えるメソッドのことで、load()を使う事でHTMLファイルを読み込む事が出来ます。

例えば、後述するような複数ページある中で共通化させたいパーツを別のHTMLファイルで作り、そのHTMLファイルを読み込む事が出来ます。

これにより、

同じ内容なのに何ページ分もHTMLファイルを更新するのは面倒だよ、、、

という労力を解消する事が出来ます。

WordPressなどのCMSではheaderやfooter、sidebarなどをパーツとして読み込んでいますが、それをHTMLで行う事ができるイメージです。

jQueryの load()でHTMLを読み込んでみよう

では実際にload()メソッドでパーツとなるHTMLファイルを読み込んでみましょう。

まず読み込む側のファイルです。

読み込む側

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- jQueryを読み込みます -->
  <script
  src="https://code.jquery.com/jquery-3.6.0.js"integrity="sha256H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="crossorigin="anonymous"></script>

  <!-- 必ずjQueryを読み込んだ後にscirptを記述しましょう -->
<script>
$(function(){
 $("#content").load(content.html);
});
</script>
  <title>読み込む側</title>
</head>
<body>
  <!-- この下に読み込まれます -->
  <div id="content"></div>
</body>
</html>

まずjQueryを読み込み、その後に以下のjQueryのコードを記載します。

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

#contentは読み込む側の場所を指定するためのidです。

load()の()の中で呼び出すファイル名を指定します。

読み込まれる側

読み込まれる側は以下のような記述です。

<ul>
  <li>リスト１</li>
  <li>リスト２</li>
  <li>リスト３</li>
  <li>リスト４</li>
  <li>リスト５</li>
</ul>

headやbodyタグは書かなくて良いの？

と思われるかもしれません。

確かにこのファイルはheadタグやbodyタグが無いので「このURLを指定して呼び出されると文字化けします」。

例

https://hogehoge.com/content.htmlのように指定して呼び出されると文字化けしてしまいます。

ただ、普通の人が普通に見る分にはそのようになる事はまず無いと思いますし、headタグなどはなくても問題ないと思います。

もし心配な場合はheadタグを書いて頂いても大丈夫です。

読み込んだ結果

通常であれば読み込んだ結果は以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
  <script>
    $(function(){
     $("#content").load(content.html);
    });
    </script>
  <title>Document</title>
</head>
<body>

  <div id="content"></div>
  <!-- 読み込んだパーツ -->
  <ul>
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
    <li>リスト４</li>
    <li>リスト５</li>
  </ul>
</body>
</html>

上記のようにパーツが読み込まれ、ページ上にも表示されればOKです。