jqueryを使ってwebサイトの共通部分をパーツ化する
webサイトのコーディングをしている際、複数のページを製作途中でヘッターやフッターといった共通の部分が変更になることがよくあります。
結局はCMS化する部分なんですが、変更になった部分を全ページに反映させてほしいという要望があります。（そういう要望の方が多いです。）こちらとしては、どこかのページさえあってればもう十分だとは思うのですが、CMS化の概念がわからないと十分だということもよくわからないかと思います。
とはいえ、全ページを反映させるのは手間なので、コーディングの段階からCMSっぽくパーツ化してしまう方がいいのかもしれないと思う次第になってきました。
いろいろな方法があるのですが、今ままで僕が知っていたものは、phpで書く、javascriptで無理矢理挿入するといったものですが、それぞれ問題点がありました。
今回は、手間も問題も少ないものを紹介したいと思います。
それは、jqueryのajaxを使用する方法です。
デモは以下になります。
DEMOではload.jsに読み込ませる記述があります。
jqueryのajaxを使って共通部分をパーツ化する
まずは、当たり前ですが、jqueryを読み込みます。
|
1 | <script src="js/jquery.min.js"></script> |
そして,head内に、以下のように書き込みます。
|
1 2 3 4 5 6 7 8 9 10 11 | $.ajax({ type: 'GET', url: "header.html", dataType: 'html', success: function(data){ $('body').prepend(data); }, error:function() { alert('問題がありました。'); } }); |
これだと、
の直後に入る感じですね。これだけです。
header.htmlのリンクは、読み込んでいるファイルからになります。
jQueryのloadだともっと簡単にできますが、エラーの処理等はないのと、読み込ませる場所の指定がajaxの方がしやすい感じがするので、こちらの方がいいのかと思ってます。
問題点
問題点としては、
google chromeのローカル環境で見られないことです。
(errorの処理になってしまいます)
それぐらいなので、他の方法よりは問題は少ないと思います。
CMS化する際もパスを変更するぐらいでそのまま移行できますしけっこう良いかと思います。
一応chromeでも見れるようにする方法があるようです。
【小ネタ】Chromeのローカルセキュリティポリシーの回避 ｜ Developers.IO
ちなみに共通化させる他の方法としては、以下があります。
更新するのが面倒！サイトの共通部分を簡単に作る様々な方法｜WEB Drawer
いずれはもっと簡単な方法がなにか出てきそうな気がしますね。。。
余談ですが、
アイキャッチの画像は、
以下からダウンロードしてきました。
JÉSHOOTS | Photos for business or personal use in high resolution for free
以下から発見しました。
10 More Websites for Free Stock Photos
Author Profile
スターフィールド編集部
SHARE
