jQuery でサイドバーを読み込む!
mt.Vicuna(と MT4)に移行しようと、一万年と二千年前から、日夜がんばっています。仕事中の空き時間とかに。
今回は、みんな大好き jQuery を使って、簡単に「サイドバーを AJAX で読み込む方法」を紹介します。
いくつか方法はあると思いますが、JSON で云々といった方法よりも簡単な、PHP(readfile
, include
, …) や SSI を使うのに近いやり方です。
jQuery を使えば、ほんの数行のスクリプトでできますよ。
サンプルページ
まずは、完成したサンプルページをご覧ください。
見た目は同じですが、後者はサイドバー部分(<div id="utilities"></div>
)を AJAX で読み込んでいます。「ソースを表示」してみてください。
肝心のコードは?
まず、サイドバー部分・div#utilities の中身はこれだけです。過去記事へのリンクのみ張っています(JavaScript を表示しないブラウザ向け)。
<div id="utilities">
<p class="archives"><a href="#" title="過去の記事を読む">More...</a></p>
</div>
<!--end utilities-->
中身は、まったくそのままの内容で、「utilities_inc.html」とでも名前をつけて出力するようにします(新規インデックステンプレートを作る)。
そして、下記コードで読み込みます。
<script type="text/javascript" src="http://example.com/js/jquery-1.2.1.min.js"></script>
<!-- jQuery を利用してサイドバーの内容を AJAX で読み込む! -->
<script type="text/javascript">
$(function(){ // DOMの読み込みが完了したら実行
$("#utilities") // ID utilitiesの
.empty() // 子要素を消去して
.load("./utilities_inc.html"); // AJAXで内容を読み込む
}); //これだけ :-D
</script>
──なんと、たったこれだけです。肝心の部分は、まとめてワンライナでも書けます。
$("#utilities").empty().load("./utilities_inc.html");
自分が jQuery のことを「ちょっとすごい CSS」と呼ぶ理由が、おわかりいただけたでしょうか?
注意点
AJAX の、というか JavaScript の仕様上、サイドバーに別の JavaScript を読み込む記述がある場合、うまく動作しません。
その回避策は──いろいろありますが、また次回、もしくはみなさんへの宿題ということで……。
あとちなみに、AJAX で読み込むと「とくに IE は 強力にキャッシュされる」ので、サイドバーの内容を更新しても反映されない、ということをよく聞きますが、jQuery の load
を使う限り大丈夫でした。
なぜ AJAX 化するのか
狙いはこんなところ。
- 共通部分を一ファイルにまとめて管理しやすく
- ページのファイルサイズを減らす
- 検索エンジンのボットに拾われない
感謝!
サンプルページは、下記のページをそのまま使いました(Copyright やライセンス表示を消さずに改変しましたが、これで良かったでしょうか?)
wu さんに感謝!