必要になったので、ajaxを使用しているページに戻るボタンを実装しました。
うまいことできたので、けっこう満足。
色々調べてみたのですが、なかなか具体的な実装例が無かった為、書き残します。
firefox2.0とIE6で検証済みです。
.htmlファイル:
ajaxにより更新されない部分に以下のHTMLソースを書いておきます。
<iframe src="ajaxframe.php" id="ajaxframe" style="border: medium none ; width: 1px; height: 1px" onload="viewAjax()"></iframe>
ちなみに呼び出している"ajaxframe.php"は真っ白なphpファイルです。
(多分htmlファイルでも問題ないです。名前もなんでもいいです。)
.jsファイル:
最低2つのファンクションが必要です。
①iframeの呼び出しファイル(src部分)を書き換えるファンクション
②iframeのonloadイベントで呼び出されるファンクション
ここでは、①にchangeFrame、②にはviewAjaxという名前を付けておきます。
//iframeのsrc部分を書き換え
var frame = document.getElementById("ajaxframe");
frame.src="ajaxframe.php?"+hash;
}
function viewAjax(){
//iframeのsrc部分を取得
var frame = document.getElementById('ajaxframe');
var hash = frame.contentWindow.document.location.href;
//引き数を取得(なかったらブランク)
if(hash.match(/.*?[#|\?]/i)){
hash=hash.replace(/.*?[#|\?]/,"")
}else{
hash = "";
}
//ここでhashに引き数が入ります。
//hashに複数の引き数を持たせたいなら、":"で区切って渡して、hash.split(":")で分割
switch(hash){
case"○○":
○○が渡されてきたときの表示処理
break;
case"××":
××が渡されてきたときの表示処理
break;
}
}
これで完成です。
ロジックは以下のとおり。
ajaxによる書き換えは"changeFrame()"イベントを呼び出します。
例:
<span onclick="changeFrame('topView')">TOPへ</span>
これでクリックされるとchangeFrameファンクションがiframeのsrc部分を"ajaxframe.php?topView"に書き換えます。
↓
src部分が書き換えられた為、iframeのonloadイベントが発生し、"viewAjax()"イベントが呼び出されます。
↓
viewajaxイベントはiframeの呼び出しファイルの引き数(ここではtopView)を取得し、それにより、表示用処理を制御できるわけです。
戻るボタンを押したときはiframeのsrc部分が前回表示していた物に自動的に書き換えられ"viewAjax()"イベントが呼び出され、表示処理がされます。
次は、ajaxによって表示したページに直リンクできるようにしたいですね。