かけるヒトからできるヒト

プログラムを書ける人からプログラムが出来る人へなるために個人的にまとめるブログ

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でも進むと戻るが有効になりました。