jQuery Mobileのバージョンアップではまった – pushStateの存在 –

jQuery Mobileをつかってスマートフォン対応をしたときにはまったこと。

　前提

jQuery Mobileのcss、javaScriptは以下のように利用

• cssはダウンロードし自分のサーバにアップ
• javaScriptはCDNを利用

また、自前としては

• 一部、自前のcssを用意
• 設定用の自前のjavaScriptを用意

上記から以下のような感じになってます。

 <link href="/jquery/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
 <link href="/css/jquery-custom.css" rel="stylesheet" type="text/css" />
 <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
 <script src="/js/jquery-setting.js"></script>
 <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

※jsのCDN先を変更しました(update 2011/09/21)
※1.0でも同様の現象が起きます。

　初期設定

Ajaxは使用しないでjquery-setting.jsで以下のように初期設定

$(document).bind("mobileinit", function(){
      $.mobile.ajaxEnabled = false;
  })

　現象

上記の前提、初期設定により起きた現象は以下のとおり。

1. 　あるページAからリンクされている違うページBへのリンクをクリック
2. 　Bが表示されたらブラウザのバックでAに戻る
3. 　再度、Bへのリンクをクリック
4. 　loadingと表示されBのURLでありながらAの内容が表示される

※ちなみにPCでやった場合は上記の現象は発生せず、スマートフォン(iPod、MEDIAS、Xperia)で発生しました。

Ajaxは使用しないようにしているのに、なぜ上記現象が発生するのか謎でした。

　解決方法

jQuery Mobile Beta3からpushStateに対応したようです。
どうもそれが原因じゃないのかなと予想。

　pushStateって？

[Ajaxを使うようにしていた場合]
example.com/からexample.com/sampleに遷移すると、URLはexample.com/#/sampleになってました。
それが、pushState対応になるとexample.com/sampleのままになります。

デフォルトでpushStateは有効になっています。
なので以下のように無効に変更。

$(document).bind("mobileinit", function(){
      $.mobile.ajaxEnabled = false;
     $.mobile.pushStateEnabled = false;
  })

上記の初期設定をした結果、現象で書いた内容は起きなくなりました。
どうも、Ajaxを使わないようにしつつpushStateを有効にすると発生する現象に思えます。

[追記]
ajaxとpushStateをtrueにした場合で、ブラウザバックを利用すると上記現象が発生するケースがあります。
ブラウザバックをユーザーが使わないというのであれば良いんだと思いますが、それは厳しいですよね。