【脱jQuery】.load()で別ページから共通パーツを読み込むのをネイティブに書き換え
2019.07.20 Posted by Coding_team
こんにちは。なかなか梅雨が明けずバイク乗り、自転車乗りの方はロードバイクに跨がれない季節を迎えていますが、今回はroadではなく、loadです。ウェブラボクリエイターズメモです。
過去の記事で「jQueryで外部にあるHTMLを読み込む」について書きましたが、
今回はそれをもっと簡単に記述できるjQueryの「.load()」メソッドと、ネイティブJavascriptにこだわりを持つマニアの方々へ書き換えJavascriptを紹介します。
先にデモページをどうぞ
DEMO
目次
1.jQuery「.load()」メソッド
jQueryの.loadメソッドを使えば、他ファイルからHTMLパーツを指定した位置に挿入してくれます。ヘッダーやフッターなどの共通パーツを別のファイルにまとめることができるので管理が楽になります。
・以下、読み込んで表示する方を「読み込むHTML」、パーツのみ記述されている方を「読み込まれるHTML」と判別します。
準備① 読み込まれるHTML「common.html」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
準備② 読み込むHTML「index.html」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
そうするとこうなります。
読み込み後①
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<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タグなどは不要。読み込みたいタグのみ記述しておけば大丈夫です。
2.「.load()」をネイティブJavascriptに書き換え
こんな感じです。
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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
|
1 2 3 4 5 |
<script> $(function(){ $("#box").load("common.html header"); }); </script> |
読み込み後②
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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> |
↓こんな書き方でもちゃんと動きます。セレクタみたいですね。
jQuery
|
1 |
$("#header").load("common.html header ul li:nth-child(1)"); |
読み込み後③
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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に、headerやfooterなどの共通パーツをいくつか記述しておけば管理がもっと楽になります。
4.書き換えJavascript
ではパーツのみ読み込む場合の書き換えはどうすればいいか？
こうしたら動きました。
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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;」
に変えれば、
例えば読み込み後①のように
div#boxの中にheaderが入ってしまっているところも
読み込み後④(innerHTMLにして適宜調整)
|
1 2 3 4 5 6 7 8 9 10 |
<div id="box"> <h1>ウェブラボブログ</h1> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> <li>menu5</li> </ul> </div> |
このように中身だけ挿入し、すっきり仕上げることもできるようになるので、適宜調整してみてください。
スタイルを既に書いている場合はセレクタが変わるかもしれないので注意が必要です。
再度、デモページです
DEMO
以上、.load()と、書き換えJavascriptでした。
関連記事こちらの記事も合わせてどうぞ。
