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

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

 

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

 

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

 

  1. jQuery「.load()」メソッド
  2. 「.load()」をネイティブJavascriptに書き換え
  3. jQuery「.load()」メソッドでパーツのみを読み込み
  4. パーツのみ読み込みの書き換えJavascript

 

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

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

 

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

 

img01

 

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

 

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

 

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

読み込み後①

 

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

 

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

こんな感じです。

Javascript

 

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

 

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

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

jQuery

 

読み込み後②

 

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

jQuery

 

読み込み後③

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

 

4.書き換えJavascript

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

Javascript

 

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

 

また、13行目の
「box.innerHTML=int.outerHTML;」

「box.innerHTML=int.innerHTML;」
に変えれば、

 

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

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

 

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

 

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

 

再度、デモページです
DEMO

 

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

  • このページを共有する