【脱jQuery】.load()で別ページから共通パーツを読み込むのをネイティブに書き換え

2019.07.20　Posted by Coding_team

Webプログラミング

d7d460796bf7d41a40f47c8cf29b708e_s こんにちは。なかなか梅雨が明けずバイク乗り、自転車乗りの方はロードバイクに跨がれない季節を迎えていますが、今回はroadではなく、loadです。ウェブラボクリエイターズメモです。

過去の記事で「jQueryで外部にあるHTMLを読み込む」について書きましたが、
今回はそれをもっと簡単に記述できるjQueryの「.load()」メソッドと、ネイティブJavascriptにこだわりを持つマニアの方々へ書き換えJavascriptを紹介します。

先にデモページをどうぞ
DEMO

jQuery「.load()」メソッド

「.load()」をネイティブJavascriptに書き換え

jQuery「.load()」メソッドでパーツのみを読み込み

パーツのみ読み込みの書き換えJavascript

1.jQuery「.load()」メソッド
2.「.load()」をネイティブJavascriptに書き換え
- Javascript
3.「.load()」メソッドでパーツのみ読み込み
4.書き換えJavascript
- Javascript
- 読み込み後④(innerHTMLにして適宜調整)

1.jQuery「.load()」メソッド

jQueryの.loadメソッドを使えば、他ファイルからHTMLパーツを指定した位置に挿入してくれます。ヘッダーやフッターなどの共通パーツを別のファイルにまとめることができるので管理が楽になります。

・以下、読み込んで表示する方を「読み込むHTML」、パーツのみ記述されている方を「読み込まれるHTML」と判別します。

準備① 読み込まれるHTML「common.html」

<header>
	<ul>
		<li>menu1</li>
		<li>menu2</li>
		<li>menu3</li>
		<li>menu4</li>
		<li>menu5</li>
	</ul>
</header>

<footer>
	<ul>
		<li>fot1</li>
		<li>fot2</li>
		<li>fot3</li>
		<li>fot4</li>
		<li>fot5</li>
	</ul>
</footer>

<ul>

</ul>

</header>

<ul>

</ul>

</footer>

準備② 読み込むHTML「index.html」

<html>
<head>
	<title>技術メモ</title>
</head>
<body>
	<div id="box"></div>
	
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			$("#box").load("common.html");
		});
	</script>
</body>
</html>

<html>

<head>

</head>

<body>

$(function(){

$("#box").load("common.html");

});

</script>

</body>

</html>

そうするとこうなります。

読み込み後①

<html>
<head>
	<title>技術メモ</title>
</head>
<body>
	<div id="box">
		<header>
			<ul>
				<li>menu1</li>
				<li>menu2</li>
				<li>menu3</li>
				<li>menu4</li>
				<li>menu5</li>
			</ul>
		</header>


		<footer>
			<ul>
				<li>fot1</li>
				<li>fot2</li>
				<li>fot3</li>
				<li>fot4</li>
				<li>fot5</li>
			</ul>
		</footer>
	</div>
	
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			$("#box").load("common.html");
		});
	</script>
</body>
</html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</header>

<ul>

</ul>

</footer>

</div>

$(function(){

$("#box").load("common.html");

});

</script>

</body>

</html>

読み込まれるHTMLには、headタグなどは不要。読み込みたいタグのみ記述しておけば大丈夫です。

2.「.load()」をネイティブJavascriptに書き換え

こんな感じです。

Javascript

<script>
	var xhr = new XMLHttpRequest(),
		method = "GET",
		url = "common.html";//読み込まれるHTMLを指定
	var box=document.getElementById("box");//読み込みたい位置を指定

	xhr.open(method, url, true);
	xhr.onreadystatechange = function () {
		if(xhr.readyState === 4 && xhr.status === 200) {
			var restxt=xhr.responseText;//String型で取得
			box.innerHTML=restxt;//完了
		}
	};
	xhr.send();
</script>

var xhr = new XMLHttpRequest(),

method = "GET",

url = "common.html";//読み込まれるHTMLを指定

var box=document.getElementById("box");//読み込みたい位置を指定

xhr.open(method, url, true);

xhr.onreadystatechange = function () {

if(xhr.readyState === 4 && xhr.status === 200) {

var restxt=xhr.responseText;//String型で取得

box.innerHTML=restxt;//完了

}

};

xhr.send();

</script>

この書き換えは調べれば結構出てきます。よくあるajaxの例文って感じです。

3.「.load()」メソッドでパーツのみ読み込み

.loadで読み込まれるHTMLの特定要素のみ読み込みたい場合このように書きます。

jQuery

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

$(function(){

$("#box").load("common.html header");

});

</script>

読み込み後②

<html>
<head>
	<title>技術メモ</title>
</head>
<body>
	<div id="box">
		<header>
			<ul>
				<li>menu1</li>
				<li>menu2</li>
				<li>menu3</li>
				<li>menu4</li>
				<li>menu5</li>
			</ul>
		</header>
	</div>

	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			$("#box").load("common.html header");
		});
	</script>
</body>
</html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</header>

</div>

$(function(){

$("#box").load("common.html header");

});

</script>

</body>

</html>

↓こんな書き方でもちゃんと動きます。セレクタみたいですね。

jQuery

$("#header").load("common.html header ul li:nth-child(1)");

1	$("#header").load("common.html header ul li:nth-child(1)");

読み込み後③

<html>
<head>
	<title>技術メモ</title>
</head>
<body>
	<div id="box">
		<header>
			<ul>
				<li>menu1</li>
			</ul>
		</header>
	</div>
	
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			$("#box").load("common.html header ul li:nth-child(1)");
		});
	</script>
</body>
</html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</header>

</div>

$(function(){

$("#box").load("common.html header ul li:nth-child(1)");

});

</script>

</body>

</html>

読み込まれるHTMLに、headerやfooterなどの共通パーツをいくつか記述しておけば管理がもっと楽になります。

4.書き換えJavascript

ではパーツのみ読み込む場合の書き換えはどうすればいいか？
こうしたら動きました。

Javascript

<script>
	var xhr = new XMLHttpRequest(),
		method = "GET",
		url = "common.html";//読み込まれるHTMLを指定
	var box=document.getElementById("box");//読み込みたい位置を指定

	xhr.responseType="document";//XMLとして扱いたいので一応記述
	xhr.open(method, url, true);
	xhr.onreadystatechange = function () {
		if(xhr.readyState === 4 && xhr.status === 200) {
			var restxt=xhr.responseXML;//重要
			var int=restxt.getElementsByTagName("header")[0].getElementsByTagName("ul")[0];//読み込まれるセレクタを指定
			box.innerHTML=int.outerHTML;//完了
		}
	};
	xhr.send();
</script>

var xhr = new XMLHttpRequest(),

method = "GET",

url = "common.html";//読み込まれるHTMLを指定

var box=document.getElementById("box");//読み込みたい位置を指定

xhr.responseType="document";//XMLとして扱いたいので一応記述

xhr.open(method, url, true);

xhr.onreadystatechange = function () {

if(xhr.readyState === 4 && xhr.status === 200) {

var restxt=xhr.responseXML;//重要

var int=restxt.getElementsByTagName("header")[0].getElementsByTagName("ul")[0];//読み込まれるセレクタを指定

box.innerHTML=int.outerHTML;//完了

}

};

xhr.send();

</script>

ドキュメント丸ごと入れるのであればresponseTextでもいいですが、
取得したドキュメントからオブジェクトを取得するのであれば11行目のように、XML型で扱う必要があります。

また、13行目の
「box.innerHTML=int.outerHTML;」
を
「box.innerHTML=int.innerHTML;」
に変えれば、

例えば読み込み後①のように

読み込み後1

<div id="box"> <header> <h1>ウェブラボブログ</h1> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> <li>menu5</li> </ul> </header> </div>

1
2
3
4
5
6
7
8
9
10
11
12

<div id="box">
<header>
<h1>ウェブラボブログ</h1>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</header>
</div>

div#boxの中にheaderが入ってしまっているところも

読み込み後④(innerHTMLにして適宜調整)

<div id="box">
	<h1>ウェブラボブログ</h1>
	<ul>
		<li>menu1</li>
		<li>menu2</li>
		<li>menu3</li>
		<li>menu4</li>
		<li>menu5</li>
	</ul>
</div>

<h1>ウェブラボブログ</h1>

<ul>

</ul>

</div>

このように中身だけ挿入し、すっきり仕上げることもできるようになるので、適宜調整してみてください。
スタイルを既に書いている場合はセレクタが変わるかもしれないので注意が必要です。

再度、デモページです
DEMO

以上、.load()と、書き換えJavascriptでした。

関連記事こちらの記事も合わせてどうぞ。

SSLの仕組みをわかりやすく解説！安全なWebサイト運営のための基礎知識

2025.05.23

ウェブアクセシビリティチェック完全ガイド！誰でもできる実践方法

2025.05.09

ノーコードツールとは？Web制作の新常識と活用事例について徹底解説！

2024.08.23