外部ファイルが表示されない
jQueryを使用してヘッダーのHTMLを読み込もうとしたのに、うまく読み込まれませんでした。原因と対処法を説明していきます。
状況
問題のコードは、大体以下のような感じでした。
読み込む側
index.html
<!DOCTYPE html>
<html>
<head>
<!--サイトのアイコンの設定など-->
</head>
<body>
<header>
</header>
<main>
<!--サイトの内容-->
</main>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
jQuery(function() {
jQuery('header').load('/header.html');
});
</script>
</body>
</html>
読み込まれる側
header.html
<!DOCTYPE html>
<html>
<head>
<!--サイトのアイコンの設定など-->
</head>
<body>
<main>
<!--サイトの内容-->
</main>
</body>
</html>
index.htmlを開くと、header要素の中にheader.htmlの内容が表示されるはずですが、表示されません。
原因
index.htmlのheader要素にheader.htmlが入るとどうなるかを考えると、原因が分かります。
index.htmlのheader要素にheader.htmlが入ると...
index.html
<!DOCTYPE html>
<html>
<head>
<!--サイトのアイコンやスタイルシートの設定など-->
</head>
<body>
<header>
<!--ここから header.html-->
<!DOCTYPE html>
<html>
<head>
<!--サイトのアイコンやスタイルシートの設定など-->
</head>
<body>
<main>
<!--サイトの内容-->
</main>
</body>
</html>
<!--header.html ここまで-->
</header>
<main>
<!--サイトの内容-->
</main>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
jQuery(function() {
jQuery('header').load('/header.html');
});
</script>
</body>
</html>
何がおかしいか分かりますね？
header要素の中に本来入らないはずのhead要素やbody要素などが入り、ぐちゃぐちゃになっています。
つまり、header.htmlは、こうすれば良かったわけです。
header.html
<!--サイトの内容-->
もはや例を示す必要があるのかというレベルです。
ちなみに、CSSは何も指定しなければindex.htmlで使用しているものが使用されます。