blog | SevenStyleWeb

prototype.js を利用してコンテンツをインクルードする

SSIなどのやり方があるけど、実際これはサーバの具合などが結構面倒だからなーって思ってた。
JSで「document.write();」でやる方法もあるけど、jsがきちゃなくなるし、更新のとき気持ち悪いなぁって思ってた。

なので、この記事タイトルを見たとき、おーって思ったね。

さーて、どういうやりかたかっていうと。すんごくカンタン。

まず、prototype.jsを読み込む。

<script type="text/javascript" src="hogehoge/prototype.js"></script>

読み込み用の関数を作成。

<script type="text/javascript">
function my_include(id, file) {
document.open();
document.write('<div id="' + id + '"></div>');
document.close();

var options = {};
options.method = "get";
options.asynchronous = false;
new Ajax.Updater(id, file, options);
}
</script>

もちろん関数名などはなんでもよい。これをhead内に。直接書かなくても、こいつを別ファイルとしておいて、読み込んでもＯＫ。

...で、読み込みたいHTMLファイルを作成して、外部に置いておく。このとき、Ajax利用なので、当然の事ながら同じドメイン内においておくこと。
んで、以下のコードを差し込みたい場所に差し込んでおく。これでＯＫ。

<script type="text/javascript">my_include("sample_id","sample.html");</script>

これはいい。
ファイルの作成もHTMLを作るようにできるわけだし、サーバのことを考えなくてもよいわけだし。

これは今後使えるなら使っていこうと思います。