TOP

jQuery Mobileではまったこと -広告が表示されない！($.mobile.changePage()でのページ遷移)-

公開日： 2012/03/10 : IT, jQueryMobile

swipeした際にページ遷移をさせるためにjQueryMobileの$.mobile.changePage()を使ってはまったことについてのメモ。

　現象

起きた現象は以下のとおり。

ページAでswipeさせる(本来はページBに遷移)
ページBに遷移せずにページAに表示されていた広告が表示される

※広告は、Googleのadsenseを利用。

　環境

上記現象が起きた環境は以下のとおり。

バージョン：jQueryMobile1.0.1
確認端末：スマートフォン(Android(MEDIAS N-04C)、iPod)

swipeさせるために書いたのは以下のような感じです。

$("#next").bind("swipe", function(){
  $.mobile.changePage( "./next.html", { transition: "flip"} );
});

また、PC(Firefox、Chrome)で見ると、現象が以下のようになります。

swipeさせると広告が表示されず、ページBのみ表示される(広告が表示されない)

　調査

$.mobile.changePage()では以下のようにページを表示しています。

最初のページはHTTPリクエストで表示
次のページは要求された内容を現在のページのDOMに挿入して表示

今回の場合だと、ページBの内容を取得して、ページのDOMに挿入して表示させています。
その中で、Googleのadsenseデータを取得しページBの内容としてDOMに挿入できていません。

　解決方法

一番簡単な解決方法は、ページの遷移に$.mobile.changePage()を使うのをやめるのが1番早いです。
代替手段として、location.hrefを使うという手があります。

その場合、読み込みの表示をさせるために以下のように書きなおすことになります。

$("#next").bind("swipe", function(){
 $.mobile.showPageLoadingMsg();
 location.href="./next.html";
});

※showPageLoadingMsg()だけを指定して上記の書き方をすると、ブラウザバックで戻った時に読み込み画面がずっと表示されたままになります。

　蛇足

jQuery Mobileではページ遷移に$.mobile.changePage()に使っています。
そのため、上記の現象はswipeをしたから起きるのではなくてページ遷移をしたら発生する現象です。

そこで、初期設定で以下のようにajaxページ遷移させないようにすれば解決します。

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

　参考サイト

$.mobile.changePage | jQuery Mobile 1.1.0 日本語リファレンス

Tweet

関連記事

iPhoneアプリ開発　−2本指で画像を移動させる−

*　やりたいこと表示させている画像(UIImageView)を2本指で移動させたい。 ※1本指は別

記事を読む

Jenkins + iPhoneアプリ(2) －ローカルリポジトリにあるデータからipaファイル生成－

*　これまで - *　最終目標 -(開発者)git(リモートリポジトリ)にソースをコミット

記事を読む

CakePHP2系でTwigを利用　－書き方のメモ－

CakePHP2系でTwigをどのように記述するかのメモ。数パターンしか載せてないですが、だいた

記事を読む

iPhoneアプリ開発　－同じ画像を2度以上画像処理した際に起こるエラーの対処－

*　起きた現象 (1) UIImageのデータを元にピクセルの値を色々といじって画像処理。 (2)

記事を読む

iPhoneアプリ開発芳名帳アプリ作成(6)　－写真に保存－

*　今までの流れ - -[http://pplace.jp/2013/06/1531/:title=

記事を読む

WordPressプラグイン「WP Hatena Notation」にPullRequestを投げた話

WordPressではてな記法が利用できる「WP Hatena Notation」を重宝しています。

記事を読む

jQuery Mobileのリストの見た目をちょっとカスタマイズ -覚書-

jQuery Mobileを使えば簡単にスマートフォン対応できる言えば出来るのですが、少しでもカスタ

記事を読む

iPhoneアプリ開発　−UITabControllerの利用−

*　やりたいこと上にあるように下部にあるタブをタッチしたら別のページを呼び出す。 *　

記事を読む

iPhoneアプリを開発してての疑問－教えてエライ人！－

MacでiPhoneアプリを開発してて疑問に思ったのの解決してないことを列挙。知識不足をさらけ出し

記事を読む

iPhoneアプリ開発　- touchesBeganとUITapGestureRecognizerの差(タッチとタップ) –

「画面にある画像を移動させたい」とか、「画面に線を書きたい」ということがあるかと思います。ぐぐると

記事を読む

Comment

マナより:
2012年3月13日 6:08 PM
検索よりたどってきた者です。
質問させていただきます。
jQuery Mobileでのサイト構築を行い、なんとか形にはなったのですが、
・indexからリンクをたどって下層のページAまで行く
・本体のバックボタンでindexまで戻る
・またリンクをたどってページBへ行く
という操作を行った場合にヘッダ、コンテンツ部分が表示されず、アドセンス広告のみが表示される状態となっています。
こういった状態は同じ方法で回避できるのでしょうか？
フッター部分を data-position=”fixed”で固定し、その中にアドセンスコードを入れている状態です。
よろしくお願いいたします。
返信
- としより:
  2012年3月13日 9:53 PM
  発生理由としては本記事と同じやつです。
  以下のページに書いているのが、同一現象ですね。
  http://pplace.jp/2011/09/344/
  解決方法としては初期設定でajaxとpushsateをfalseにするという方法になります。
  以下のような感じですね。
  $(document).bind(“mobileinit”, function(){
  $.mobile.ajaxEnabled = false;
  $.mobile.pushStateEnabled = false
  })
  返信
マナより:
2012年3月13日 11:25 PM
ご回答ありがとうございます。
教えていただいた通りに追加してみましたが、状態は変わらず、広告のみが表示されています。
書き方が違うのでしょうか…
$(document).bind(“mobileinit”, function(){
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false
})
としているのですが…
確認にはAQUOSPHONEを使用しており、PCでの確認にはGoogleChromeを使っています。
Chromeでは最下部に自動的に広告が表示されるため、フッタ部分が表示されないので十分な確認はできていませんが、フッタだけが表示されるようなことはありませんでした。
AQUOSPHONEの方でフッタのみが表示される現象が起きた際のページ情報でのURLは正常なもの（#などふくまれていない）でした。
また、リンクに data-ajax=”false” rel=”external”を指定しているリンクでも同様の状態になります。
何か別のところに問題があるのでしょうか？
よろしくお願いいたします。
返信
- としより:
  2012年3月14日 1:02 PM
  jqueryとjquerymobileのjsの間に以下のjsファイルを用意して、現象がおさまないならば、
  $(document).bind(“mobileinit”, function(){
  $.mobile.ajaxEnabled = false;
  $.mobile.pushStateEnabled = false
  })
  location.hashへの変更の処理を無効にするように以下の設定を追加してみるといいかもしれません。
  $.mobile.hashListeningEnabled = false;
  ※ただ上記設定にすると、1ページ内にいくつものページがあるような書き方をしてページ遷移させている場合にそれが使えなくなります。
  http://example.com/#test みたいなことをしても
  の箇所が表示されなくなります。
  返信
マナより:
2012年3月14日 1:28 PM
ご回答ありがとうございます。
他にも色々調べてみて
$(document).bind(“mobileinit”, function(){
　$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
　$.mobile.ajaxLinksEnabled = false;
　$.mobile.ajaxFormsEnabled = false;
　$.mobile.pushStateEnabled = false;
});
と記述した.jsファイルを用意、jQueryとjQueryMobileの間にその.jsファイルへのリンクタグを挿入してみたのですが、
同じようになりました。
試しに広告タグやリンクなどを外した簡易的なページで試してみたんですが、
・ページAからページBに移動
・本体の戻るボタンでバック
・再度リンククリックでページBに移動
とした際に一瞬ページBの内容が表示、直後にロード表示が出てページAの内容が表示される状態になりました。
この時のURLはページBのものとなっていました。
再読み込みするとページBの内容で表示されるのですが、サイトの内容と構成を考えると、私の作りたいサイトでは戻るボタンを利用する方が多いと思われるので、どうにか回避できないものかと思っております。
お忙しいかと存じますが、よろしくお願いいたします。
返信
マナより:
2012年3月14日 5:23 PM
追記です。
ページAからページBへのリンクの際に
入れ子上のリストからのリンクににした場合とそうでないリンクの場合で挙動が違っていました。
リンクリスト
ページＡへ
ページＡへ
とすると
上のリンクの場合はページ１→入れ子のリスト→ページ２へ進み、
ブラウザバックでページ２→入れ子のリスト→ページ１と進むようになりますが、
このようにして戻ると、正常に表示されました。
下の場合のようにページＡから直接ページＢへ飛ぶような場合にブラウザバックを使うと
正常に表示できないようです。
よろしくお願いします。
返信
マナより:
2012年3月14日 5:26 PM
すいません表示がうまくいかなかったので…
<ul data-role=”listview”>
<li>リンクリスト
<ul>
<li><a href=”pageB.html” data-ajax=”false”>ページＡへ</a></li>
</ul>
</li>
<li><a href=”pageB.html” data-ajax=”false”>ページＡへ</a></li>
</ul>
返信
- としより:
  2012年3月14日 11:21 PM
  階層型リストを使っているんですね。
  その場合だと、厳しいかもしれません。
  もし、やるなら別ページにするのではなくて
```
&lt;a href=&quot;./sample.html#pageB&quot;&gt;ページB&lt;/a&gt;
```
  のようにして同一ページ内で遷移させるとかですね。
  返信
マナより:
2012年3月15日 7:48 PM
ご回答ありがとうございます。
リストにした場合もしなかった場合でも同様だったので回避できないのかもしれないですね…
お時間いただき、ありがとうございました。
返信

Message コメントをキャンセル

PREV: order byでハマったこと -order by、group byの処理順序-
NEXT: [感想]　10日でおぼえる jQuery入門教室 ☆☆☆(3.0)

NEW ENTRY

: [感想] Effective Objective-C 2.0　☆☆☆☆★(4.5)
* 構成 - 第1章　Objective-Cに慣れる -

: [感想] iOSアプリテスト自動化入門　☆☆☆(3.0)
* 構成 - Chapter 1 テスト自動化への取り組み

: DeployGateを試してみた(iOS編)　－DeployGateがiOSに対応－
今までのDeployGate - -[http://pplace.

: iPhone/iPadアプリを開発するためにやったこと
今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

: ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –
* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

iOSアプリ情報
・リリースしたアプリの情報
アプリリリース情報
・アプリ用公式Twitter
@pplace_app

Tweet