ajaxを使った遷移のないページで戻るボタンを利用
ajaxを使ってページ遷移をしないシステムを扱っています。
ページ遷移をしない時に厄介になるのが、URLが変わらないゆえにブラウザの進む、戻るが効かない事。
そこで現在のシステムでは、進む、戻るを有効にするhashchangeというプラグインを導入しています。
Ben Alman » jQuery hashchange event
ハッシュが変わった時にイベントを追加できるというものです。
これを使うことで、ajaxや「http://url.html#hoge」のようにurl内でアクセスをした時にイベントが発生して、そのタイミングで進む、戻るが効くようになるということです。
以下のページに詳しくまとまっていますので、プラグインの詳細や使い方は以下参照。
jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」(実装解説つき): 小粋空間
問題
先日、システムのjQueryを1.10に上げるという作業が発生しました。
テストしてみたところ、jquery.ba-hashchange.js内でエラーを起こしていたのを発見。
本家サイトをみてみると、そもそもjQuery 1.2.6, 1.3.2, 1.4.1, 1.4.2しかサポートしてませんでした。
しょうがないので、上記のサイトを参考に中身のコードを読んでいると、以下のようなコードを発見。
$.browser.msie && !supports_onhashchange && (function(){
ブラウザごとに動作が違うらしく、 IEの判定を行っていました。
この$.browserはjQuery1.3からサポート外、1.9で完全に削除となっていたので、使えなくなっています。
上記のサイトそのままのように$.support.msieとやろうとすると、supportの中にはIEを判定、といったようなブラウザを直接判定する機構が存在しないので、IEでは進む、戻るが使えなくなります。
解決
要はIEの判定ができればいいわけなので、ここを以下のようにかえます。
$.support.noCloneEvent && !supports_onhashchange && (function(){
とするとIEにはclone eventがないので、IEであるという判定ができます。
これでIEでも進むと戻るが有効になりました。