前の記事 ≪:JavaScriptとLightBoxを組み合わせたスマートな写真の見せ方サンプル「Sucke...
次の記事 ≫:花火アニメーションをJavaScriptで実装「Fireworks.js」

Ajaxなページで「戻るボタン」を機能させる方法

2007年02月22日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

Ajax Back Button Hack

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

そこで、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の状態に)

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

関連の記事検索:Ajax, チュートリアル
スポンサード リンク

By.KJ : 2007年02月22日 07:09 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)