jQueryのload()で外部のHTMLが表示されない場合の対処法！
jQueryのload()で外部のHTMLが表示されない場合の対処法について解説します。プログラミング初心者にとって、jQueryのload()で外部のHTMLが表示したいのにできないということが多々あります。その解決策をサンプルコードを用いて解説します。
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
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>この時、表示させたいファイルにもbody、html、head要素が含まれていると二重に書かれることとなり、私のPCでは問題なく表示されましたが、環境によっては表示されない事があります。
HTML中に別のHTMLファイルを内包する形としては、iframe要素を思い浮かべる方もいるかと思いますが、iframe要素無しにhtml要素が複数ある状態は好ましくないため、上記ケースは回避した方が無難でしょう。
対処法
ではこの対処法を紹介します。
まずサンプルコードを用いて、挙動を見てみましょう。
このように、外部ファイルとなるheader.htmlには表示させたい要素のみ記述すると、確実に表示させることができます。
JavaScriptを記述している場合
表示させる側のHTMLファイルで表示させたい要素に対して、JavaScriptの記述をしている場合にも、jQueryのload()で外部のHTMLが表示されない問題が発生します。
ではその対処法について見ていきましょう。
対処法
まずサンプルコードを用いて、挙動を見てみましょう。
このように表示させる側のHTMLファイルにではなく、そのパーツとなる方のHTMLファイル側にJavaScriptの記述をしてあげると、きちんと表示されます。
まとめ
いかがでしたでしょうか？
ここで紹介した3つのケースが、jQueryのload()で外部のHTMLが表示されない問題を引き起こすほとんどの原因となっています。
是非ご自身で試して、確認してみてください。
