jQueryのload()で外部のHTMLが表示されない場合の対処法!

jQueryのload()で外部のHTMLが表示されない場合の対処法について解説します。プログラミング初心者にとって、jQueryのload()で外部のHTMLが表示したいのにできないということが多々あります。その解決策をサンプルコードを用いて解説します。

コンテンツ [表示]

  1. 1jQueryのload()で外部のHTMLが表示されない問題
  2. 1.1load()メソッドの使い方
  3. 2jQueryのload()で外部のHTMLが表示されない場合の対処法
  4. 2.1外部ファイルパスで指定したファイルが無い場合
  5. 2.2余計な要素が含まれている場合
  6. 2.3JavaScriptを記述している場合
  7. 3まとめ

jQueryのload()で外部のHTMLが表示されない問題

jQueryのload()で外部のHTMLが表示されない問題がプログラミングを始めて、間もない時によく起こりえます。

ここではこの問題が主に起こりうる2つの場合の紹介とその対処法を解説します。

load()メソッドの使い方

ここで簡単にload()メソッドの使い方を紹介します。jQueryのload()メソッドは以下のようにして用います。

jQueryのload()メソッドの使い方

$("表示させる側の要素").load("外部ファイルパス");

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにload()メソッドにより外部ファイル(上記例ではheader.htmlファイル)を読み込めていることが分かります。

jQueryのload()で外部のHTMLが表示されない場合の対処法

ではjQueryのload()で外部のHTMLが表示されない場合を紹介してその対処法について解説します。

外部ファイルパスで指定したファイルが無い場合

jQueryのload()メソッドに引数で指定した場所にファイルが無い場合はエラーになります。この問題はまず最初に確認しましょう。

Chromeのデベロッパーツールを使えば簡単に確認出来ます。デベロッパーツールは以下のショートカットで開きましょう。

Chromeでデベロッパーツールをショートカットで開く

[WindowsのChrome]
Ctrl + Shift + I
または
F12

[MacのChrome]
Command + Option + I
Chromeでデベロッパーツールをショートカットで開く方法!のイメージ
Chromeでデベロッパーツールをショートカットで開く方法!
Chromeでデベロッパーツールをショートカットキーで開く方法を紹介します。先にショートカットのやり方の結論を伝え、また検証から開く方法やメニューから開く方法もあわせて解説します。
デベロッパーツールのNetworkタブ
デベロッパーツールが開いたら、「Network」タブをクリックしましょう。NetworkタブではWEBページを表示させるための材料であるHTMLファイルや、CSSファイル・JSファイル、画像ファイルなどの一覧を確認出来ます。
ファイルの読み込みでエラーが発生している時にデベロッパーツールのエラー表示
このようにもしjQueryのload()メソッドでファイルの読み込みでエラーが発生している場合は該当ファイルが赤字でエラー表示されます。

もし読み込みでエラーが発生していたら、正しいURLに書き直すなど対応しましょう。

余計な要素が含まれている場合

例えば外部HTMLを以下のような形とします

外部ファイル

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <nav>
    <ul>
      <li>home</li>
      <li>contact</li>
    </ul>
  </nav>
</body>

</html>

この時、表示させたいファイルにもbodyhtmlhead要素が含まれていると二重に書かれることとなり、私のPCでは問題なく表示されましたが、環境によっては表示されない事があります。

HTML中に別のHTMLファイルを内包する形としては、iframe要素を思い浮かべる方もいるかと思いますが、iframe要素無しにhtml要素が複数ある状態は好ましくないため、上記ケースは回避した方が無難でしょう。

対処法

ではこの対処法を紹介します。

まずサンプルコードを用いて、挙動を見てみましょう。

このように、外部ファイルとなるheader.htmlには表示させたい要素のみ記述すると、確実に表示させることができます。

JavaScriptを記述している場合

表示させる側のHTMLファイルで表示させたい要素に対して、JavaScriptの記述をしている場合にも、jQueryのload()で外部のHTMLが表示されない問題が発生します。

ではその対処法について見ていきましょう。

対処法

まずサンプルコードを用いて、挙動を見てみましょう。

このように表示させる側のHTMLファイルにではなく、そのパーツとなる方のHTMLファイル側にJavaScriptの記述をしてあげると、きちんと表示されます。

まとめ

いかがでしたでしょうか?

ここで紹介した3つのケースが、jQueryのload()で外部のHTMLが表示されない問題を引き起こすほとんどの原因となっています。

是非ご自身で試して、確認してみてください。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次