人気ブログランキング |
(JavaScript)ページの一部を動的に置き換える(prototype.js)
業務で久しぶりにWebを触ってます。
自社HPのメンテなのですが、各ページのヘッダー(ナビゲーションメニューと会社ロゴ)とフッター(コピーライトとその他もろもろ)の変更にも簡単に対応できるように、それらを別ファイルとして保存しておきページ読み込み時に自動的にヘッダー、フッターファイルを読み込んで表示させるようにしたいと思いました。

JavaScriptでファイル読み込んでinnerHTMLで挿入すればいいだけなのですが、数年前にAjaxの開発で使った老舗ライブラリprototype.jsを使ってみました。

prototype.jsのバージョンは1.6.0.3です。

サーバ側にあるファイルを取得してクライアント側のHTMLページ内の指定の場所に表示するだけでれば、Ajax.Updateを使い非常に簡単にできます。


function IncludeHeadFooterFiles() {
new Ajax.Updater(
{ success: 'header' } ,
'header.html' ,
{ method: 'get' , onFailure: displayError}
);
 
new Ajax.Updater(
{ success: 'footer' } ,
'footer.html' ,
{ method: 'get' , onFailure: displayError}
);
}
 
function displayError(){
alert("ファイルの取得に失敗しました");
}




あとはページのOnloadイベントに IncludeHeadFooterFiles() 関数をセットするだけでOKです。


ちなみにIE7でローカル上(webサーバを経由せず)にテストすると、うまく動きませんでした。
どうやらエクスプローラからHTMLをブラウザで見るとダメみたいです。
ちゃんとWEBサーバに配備してからhttp経由でテストしないといけないんですね。
Firefox3はローカル上からいけたんですが、IE7はやっぱ面倒です。

参考:ファイルの表示(Ajax.Updater)
by jehoshaphat | 2008-10-13 20:01 | Webがらみ


<< (WindowsServer2... 頭痛。。。 >>