外部htmlファイルをprototype.jsでインクルードしてメインのページに表示させる
外部に html で別ファイルを作り、それを読み込んでメインのページに表示させる方法です。まずはサンプルを見てください。
１．http://www.prototypejs.org/download から prototype.js をダウンロードする。
２．インクルードする html ファイルの <head> 部分に以下のように記述する。
<html>
<head>
<!-- ここから -->
<script type="text/javascript" src="prototype.js"></script> ← 適格場所は変更
<script type="text/javascript">
function contents_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>
３．メインページの表示させる位置には以下のように記述しておきます。もちろん、ここで使われている " demo " とか " sample " などという文字列は変更します。
<div class="demo" id="sample"></div>
<script type="text/javascript">contents_include("sample_id","sample.html");</script>
この方法は私のサイトのようにもう頁数が多くなりすぎてメニューなどの更新が大変なサイトなどでは非常に有用です。
メニュー用の html を別に作っておけばいいわけですから。
css ファイルなどは表示させるほうのページに通常と同じように <head> 部分に記述しておきます。
使い方によってはいろいろ重宝するかもしれませんが、他の js ファイルとバッティングしたりすることもあるようですので注意を要します。
さらに head 部分に記述するときの順番なども考慮する場合もあるようです。