Ajax Back Button Hack

Ajaxなページで「戻るボタン」を機能させる方法。
Ajaxなページでは、ブラウザの「戻るボタン」を押すと、通常は、前に開いていたページに戻ってしまいます。
Ajaxでページを１，２，３と開いていって、２に戻りたいのに、前に開いていたページに戻るのは利用者としては不本意な動作です。

そこで、IFRAMEを使った、Ajaxでの「戻るボタン」実装ハック方法の紹介。



Ajaxで画面を切り替えた際に、IFRAMEのsrcも切り替えることで戻るボタンを動作させることが出来ます。

例えば、javascriptで次のようにIFRAMEのsrcを切り替えます。

<iframe id="bbFrame1" src="http://www.yahoo.co.jp"></iframe>
<script type="text/javascript">
var bbFrame1 = document.getElementById("bbFrame1");
bbFrame1.src = http://phpspot.org/;
</script>

IFRAMEが最初、http://www.yahoo.co.jp/ を開いていますが、JavaScriptによってIFRAMEの中身が http://phpspot.org/ に書き換わります。
ここで、戻るボタンを押すと、IFRAME内のアドレスが、http://www.yahoo.co.jp に変わります。

IFRAMEの幅と高さが1ピクセルであっても同じように動作します。
これは、ブラウザの戻るボタン、次へボタンを、見た目的には何も起こさせないように制御できるということです。

IFRAMEを見えないようにしておき、IFRAME内から、JavaScriptを呼び出すことで、戻るの動作をAjaxなページでも実装できるというわけです。

IFRAME内で動作させるスクリプトは、例えば、hogehoge.php?state=1 のようにアクセスできるものにしておき、
state=1の引数が渡された場合、1の状態に戻るようなJavaScriptを吐き出すものであればよいはずです。(state=2の場合は2の状態に)

戻るボタンを押したらとんでもない所に戻ってしまった、ということが無いように、こういった非公式な形ではありますが、実装しておくとよい面が多くありそうなので覚えておいて損は無いはずです。