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

公開日: : 最終更新日:2014/04/20 IT, jQueryMobile


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にした場合で、ブラウザバックを利用すると上記現象が発生するケースがあります。
ブラウザバックをユーザーが使わないというのであれば良いんだと思いますが、それは厳しいですよね。

広告

関連記事

no image

iPhoneアプリ開発 -スライドアウトするスプラッシュ画像-

* やりたいこと アプリを起動すると表示される画像(スプラッシュ画像)があります。 単に表示されるだ

記事を読む

sample1

jQuery Mobile1.2のCollapsible Listsを試してみた -画像のカスタマイズについて-

8月1日にjQuery Mobile1.2 Alphaが出ました。 まだAlphaなので自

記事を読む

no image

iPhoneアプリ開発 -WebViewで表示しているページで特定のリンククリック時の動作を変える-

* やりたいこと UIWebViewでWebページを表示し、特定のリンクをクリックした際には別処理を

記事を読む

no image

Jenkins+Capistranoを設定した時にしたこと -「ポート変更」「公開鍵認証」対応-

* 前段階 上記にあるように、Jenkins+Capistranoの設定をしています。 ただし、設

記事を読む

no image

はてなスターのアイコンを日本酒アイコンにしてみた

日本酒大好きです。 というわけで、はてなスターを日本酒アイコンにしてみました。 その流れ

記事を読む

no image

カレログ騒動で考えたライフログのこと

今回、カレログというAndroidアプリが話題になり騒動になってます。 というわけで、ふとカレログ

記事を読む

no image

Twitterでサービスにログイン -PHP(CakePHP1.3)で実践編-

以前、ソーシャルログインについて書きました。 ただ、Twitter連携にまだ触れてない人にはちょ

記事を読む

no image

MySQLのバックアップ手順 -消えたら困るものはバックアップ-

そろそろデータが消えてもらったら困るぐらいになっていたのでバックアップをとることにしました。 とい

記事を読む

Jenkins + DeployGate(1) -DeployGateでAndroidアプリ開発-

TestFlight for Androidが発表されて1ヶ月ぐらいたちますが、音沙汰がありません。

記事を読む

no image

Twitterでサービスにログイン -ソーシャルログイン-

* やりたいこと -自身のWebサービスにTwitterIDでログイン(ソーシャルログイン)したい。

記事を読む

広告

Comment

  1. draemon より:

    どうもありがとう!
    私も同じところでハマッテいましたが
    この記事で解決できました。

  2. blue_km より:

    同様の現象が発生し
    ググってググって、やっとココに辿り着くことができました

    おかげ様で解決しました
    感激です

  3. bj より:

    同じ現象で苦しんでいました!
    ありがとうございます!

  4. FUMI より:

    ありがとうございました。
    まったく同じ現象で悩んでいたところ救われました。

  5. TTTT より:

    同じく。
    ありがとうございます。

  6. ks より:

    同じ現象で苦しんでました。
    本当に助かりました!
    ありがとうございました。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑