jQueryMobileでブラウザの戻るを押すとバグる

Read More

はい、jQueryMobile。


タイトルに書いたように、
jQueryMobileを使ってて、ブラウザの"戻る"を押すと、その後特定のページ表示がバグる現象が発生することがある。

いや以前からこのバグの存在自体には気が付いていたんだけど、
再現方法がよくわからんのでしばらく放置してたんだわ。


で、今日。


たまたまこのバグ発生時の挙動を特定できた。

まずはバグの再現方法についての手順。
1.普通にページを開く。
仮にこれをAページとする。

2.Aページからリンクを踏んでBページへ移動する。
Aページの中にBページへの単純なリンクがあるものとする。

3.Bページが表示されたら、ブラウザの戻る機能を使ってAページに戻る。

4.Aページが表示されたのを確認したら、先ほどと同じBページへのリンクをもう一度踏む。

以上。


こうするとBページが表示されたのち、その直後になぜかぐりんとAページに遷移してしまう。

これはiPhoneでもAndroidでも確認できた。

バグと言って差し支えないと思う。



で、その解決方法。


以前に、
"jQueryMobileでページ遷移の時のスライドをやめる"
という記事の中で書いた、custom-scripting.js というものをここでも利用する。

jQueryMobileでページ遷移の時のスライドをやめる
↓↓↓
http://xirasaya.com/?m=detail&hid=231


この custom-scripting.js を以下のように一行足す。
■以前のcustom-scripting.jsの内容
$(document).bind("mobileinit", function(){
  $.mobile.ajaxEnabled = false;
  $.mobile.ajaxLinksEnabled = false;
  $.mobile.ajaxFormsEnabled = false;
});


■今回の内容
$(document).bind("mobileinit", function(){
  $.mobile.ajaxEnabled = false;
  $.mobile.ajaxLinksEnabled = false;
  $.mobile.ajaxFormsEnabled = false;
  $.mobile.hashListeningEnabled = false;
});



比べてみればわかるように、新しいものには
$.mobile.hashListeningEnabled = false;
という一行が足してある。

この一行がどういうものかというと、
公式マニュアルの言葉を一部借りて説明すると、
自動的にlocation.hashへの変更を処理するのを無効にする、
ということになる。


自分の場合はこれで前述したような問題はなくなった。

が、恐らく1つのページ内にいくつものページを用意するような使い方(jQueryMobileの正しい使い方ではある)をしている人はこれをすると何かしら弊害が出そうな予感がする。

そのようなページを用意して検証するのもメンドクサイのでやらんけど。


暇な人はやった結果を教えてplz


Comments(4)

1  マナ  2012/03/18 (日) 22:15 ID:XXXXXXXXX
同様のバグで回避方法を探していました。

>恐らく1つのページ内にいくつものページを用意するような使い方(jQueryMobileの正しい使い方ではある)をしている人はこれをすると何かしら弊害が出そうな予感がする

の部分についてですが、おっしゃる通り弊害というか、思った通りの動きをしてくれませんでした。
例えば1html内にページAとページBがあり、ページA内にダイアログでページBが開くリンクがあった場合、
ダイアログで開くことはできるのですが、自動挿入される×ボタンが反応しない、ブラウザバックを使っても戻らない状況になります。
また、入れ子リストになった場合も同様に、子リストのページに移動し、ブラウザバックすると、URLは戻るのに表示は子リストのまま、となります。

jQueryMobile本来の機能を活かしたいのですが、ユーザーがブラウザバックを利用しない保証はありませんし、どちらかというと使う方の方が多いのではないでしょうか…。
今のところどちらを取るか、といった感じなのでしょうか。

2  シラサヤ  2012/03/18 (日) 22:37 ID:XXXXXXXXX
検証報告ありがとうございます。
やはり複数ページのコーディングしている場合まともに動きませんでしたか。

なので結論としては、今の所、ブラウザバックの問題が解決されない限り、一つのHTMLに複数のページをコーディングするのは止めといた方がよさそうですね。

jQueryMobileの長所を潰すようで残念ですけどがそれが解決されない限り実運用で使えそうにありません。

今後の開発に期待することにしましょう。

3  マナ  2012/04/08 (日) 00:42 ID:XXXXXXXXX
ご報告させていただきます。
$.mobile.hashListeningEnabled = false;
ではなく
$.mobile.pushStateEnabled = false;
とするとバグが発生しませんでした。
また、階層化したリストも使用できました。

まだ細かい部分まで確認できていませんが、取り急ぎご報告させていただきました!

4  シラサヤ  2012/04/10 (火) 11:56 ID:XXXXXXXXX
ご報告ありがとうございます>マナさん

このような方法もあったんですね。
設定による影響などが分かったら是非教えて下さい。


話は少しずれますが、
久しぶりに公式マニュアル読み直してみたら
設定できるオプションの数が16から22まで増えていました。

どんだけ見てないんだってツッコミはナシで…


日進月歩で少し驚き。