jQuery mobile の戻るボタンにハマったなう

jQuery mobileで画面を実装したところ、headerに自動挿入されるBackボタンを押すと、前のページに戻るものの、レイアウト崩れが発生してしまうバグに悩まされました。解決方法を探すのにやたらと苦労したので、検索に引っかかるソースを増やす目的でここにも解決方法をメモしておきます。

レイアウト崩れの具体的な症状は、下記の症状です。

• headerが表示されない
• 前のページで押したボタンが、本来は下にスクロールしなければ見えない位置にあるはずにも関わらず、ビューの下部にくっつく形で強引に表示される
• おまけにスクロールまでできなくなる

どうもこの症状は、「戻るボタンを押すと、前のページで表示していたところまで自動的にスクロールする」という親切機能がうまく動いてないために発生する問題のようです。

なので、下記のコードをHTMLの

タグ内に突っ込んで機能を切ってしまいます。

<script type="text/javascript">
<!--
$(document).bind('pagehide', function(e){
    var prev = $.mobile.urlHistory.getPrev();
    if ( prev && prev.page ) {
        prev.page.jqmRemoveData('lastScroll');
        prev.page.jqmRemoveData('lastClicked');
    }
});
// -->
</script>

これで機能を落としてしまえば、とりあえず問題無し。

なおこの内容は下記のブログを参考にさせていただきました。ありがとうございます！

• jQuery Mobileでページの挙動がおかしいときは$.mobile.urlHistroyを参照してpageを調整してみる ::ハブろぐ
• jQuery Mobileで提供されているページ系イベントについてのまとメモ ::ハブろぐ

jQueryのeventなどの考え方を丁寧に説明してくださっているので、勉強のためにぜひご一読されるとよろしいと思います！

ではでは。