jQuery Mobile で 一覧 → もっとみる → 詳細 → 戻る

こんにちは、tahara です。

jQuery Mobile のサイト。

1. 一覧ページで次ページのかわりに「もっとみる」リンクがある。
2. 「もっとみる」リンククリックで Ajax で次ページ分を一覧に追加。
3. 一覧からどれか選んで詳細ページへ。
4. ブラウザの「戻る」

とすると、「もっとみる」で続み込んだ分が一覧ページからなくなっている現象についてです。

詳細ページから「戻る」した時に jQuery Mobile の onPopState によって、 「もっとみる」クリック前の 1 ページ目がリクエストされてしまうんですね。

この対策として histroy.replaceState を使って詳細ページから戻った時の onPopState で2 ページ目がリクエストされるように history を書き換えれば いいのでは? と思いやってみました。

var url_back = "2ページ目の URL";
var state = {
    hash: "#" + url_back,
    title: document.title,
    initialHref: $.mobile.path.parseLocation().hrefNoHash
};
history.replaceState(state, document.title, url);

これで2ページ目に戻るようになりました。

しかし、スクロール位置がおかしい。 普通は戻った時に詳細に遷移する前の位置にスクロールするのに、 ページの一番上を表示したままスクロールしません。

jQuery Mobile のソースを読んでみると $.mobile.urlHistory の中に URL とスクロール位置などを持っているようでした。

var active = $.mobile.urlHistory.getActive();
active.url = url_back;
active.pageUrl = url_back;

というように $.mobile.urlHistory の中も書き換えてみたら、 戻った時にちゃんと前の位置にスクロールするようになりました。

jQurey Mobile で history.replaceState する時は $.mobile.urlHistory の方もあわせて書き換えないと、というお話でした。

最後に、弊社では100万組の親子を笑顔にするデザイナー募集しています。 ご興味のある方は一緒にランチでもとりながらお話しさせてください。