東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

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

2019.07.20 Posted by

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でした。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278