ajaxで戻るボタンを実装する

はてなブックマーク - ajaxで戻るボタンを実装する
このエントリーをはてなブックマークに追加
Share on Facebook

必要になったので、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という名前を付けておきます。

function changeFrame(hash){
//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によって表示したページに直リンクできるようにしたいですね。

コメントをどうぞ

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">