prototype.jsで外部htmlファイルを読み込む

builderの記事でこんなのがあった。prototype.js を利用してコン...

builderの記事でこんなのがあった。

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内に。直接書かなくても、こいつを別ファイルとしておいて、読み込んでもOK。

...で、読み込みたいHTMLファイルを作成して、外部に置いておく。このとき、Ajax利用なので、当然の事ながら同じドメイン内においておくこと。
んで、以下のコードを差し込みたい場所に差し込んでおく。これでOK。
<script type="text/javascript">my_include("sample_id","sample.html");</script>

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

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

■関連ページ(relation page)
ブログ内:javascript関連ページ
http://sevenstyleweb.com/blog/javascript/

■javascript自作ライブラリ(labo)
http://sevenstyleweb.com/labo/cover/
http://sevenstyleweb.com/labo/fadiv/
http://sevenstyleweb.com/labo/mklist/


この記事の周辺情報

著者

稲本[せぶん]浩介
福岡の企業に在籍し、Webを中心に活動中。Webディレクター、IA(インフォメーション アーキテクト)、マークアップエンジニア、CSSコーダーetc。
Twitterボタン

amazonさんがこのサイトを見て、書籍を紹介してくれています。