HTML/CSS

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

2021年5月20日

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2024年6月時点)。

あれー?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>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</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>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
  </ul>
</body>
</html>

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

ページ上に表示されない場合

さて、ここからが本記事の本題なのですが、上記のように書いても表示されない事があります。

そういう場合はサーバーにアップロードしてみましょう。

load()メソッドはローカル環境ではエラーになるため、ローカル環境では該当のファイルを読み込む事が出来ません。

そのため、サーバーに必要なファイルを全てアップロードして、改めてチェックしてみてください。

jQuery3ではload()は廃止されている

ちなみにですが、jQuery3ではload()メソッドは廃止されています。

なので上記の書き方をする場合はjQueryの2までのCDNを使って記述するようにしましょう。

それではまた次の記事でお会いしましょう。

  • この記事を書いた人
  • 最新記事

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2024年6月時点)。

-HTML/CSS
-