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

公開日: : 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;
});

 参考サイト

広告

関連記事

no image

PhoneGapを触ってみた(2) -実機でテスト編-

* 今までの流れ - * 自分の端末で動かしてみよう 今回は、PhoneGapで作成したアプリを実

記事を読む

no image

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

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

記事を読む

Jenkins + DeployGate(2) -DeployGateにアプリをアップ!-

DeployGateを使ってますか? 継続的にDeployってますか? TestFlightの

記事を読む

setup

Google Appsで独自ドメインメールの利用

独自ドメインでメアドを持ちたかったのでGoogle Appsを利用してみました。 その各種設定の覚

記事を読む

no image

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

* やりたいこと macのターミナルでgitをいじっていると -今のブランチってなんだっけ? -g

記事を読む

no image

iPhoneアプリ開発 -iOS6から変わったこと-

Deployment Targetを5.1にしていた時には気がつかなかったのですが、iOS6になって

記事を読む

mixisample

iPhoneアプリ開発 -mixiSDKを使ってmixi連携をしてみる(1)-

* やりたいこと iPhoneアプリでmixiと連携し、mixiボイスなどに文字を投稿する。 ※

記事を読む

構成

定期的にデータ取得のためにCakePHP1.3でシェル機能を利用

定期的にデータを取得する行為をするために、はじめてシェル機能を使ってみたのでメモ。 * ス

記事を読む

no image

mailtoリンクの件名や本文の文字化け -N-02Aのケース-

* mailtoリンクの仕様 携帯電話用のWebサイトではmailtoリンクを使うことが多いと思い

記事を読む

no image

iPhoneアプリ開発 -UIScrollViewで画像を拡大・縮小-

* やりたいこと UIScrollViewでピンチアウト・インして上に乗っている画像を拡大・縮小した

記事を読む

広告

Comment

  1. マナ より:

    検索よりたどってきた者です。
    質問させていただきます。

    jQuery Mobileでのサイト構築を行い、なんとか形にはなったのですが、
    ・indexからリンクをたどって下層のページAまで行く
    ・本体のバックボタンでindexまで戻る
    ・またリンクをたどってページBへ行く
    という操作を行った場合にヘッダ、コンテンツ部分が表示されず、アドセンス広告のみが表示される状態となっています。
    こういった状態は同じ方法で回避できるのでしょうか?

    フッター部分を data-position=”fixed”で固定し、その中にアドセンスコードを入れている状態です。
    よろしくお願いいたします。

    • とし より:

      発生理由としては本記事と同じやつです。

      以下のページに書いているのが、同一現象ですね。
      http://pplace.jp/2011/09/344/

      解決方法としては初期設定でajaxとpushsateをfalseにするという方法になります。
      以下のような感じですね。
      $(document).bind(“mobileinit”, function(){
      $.mobile.ajaxEnabled = false;
      $.mobile.pushStateEnabled = false
      })

  2. マナ より:

    ご回答ありがとうございます。
    教えていただいた通りに追加してみましたが、状態は変わらず、広告のみが表示されています。
    書き方が違うのでしょうか…

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

    としているのですが…

    確認にはAQUOSPHONEを使用しており、PCでの確認にはGoogleChromeを使っています。
    Chromeでは最下部に自動的に広告が表示されるため、フッタ部分が表示されないので十分な確認はできていませんが、フッタだけが表示されるようなことはありませんでした。

    AQUOSPHONEの方でフッタのみが表示される現象が起きた際のページ情報でのURLは正常なもの(#などふくまれていない)でした。
    また、リンクに data-ajax=”false” rel=”external”を指定しているリンクでも同様の状態になります。

    何か別のところに問題があるのでしょうか?
    よろしくお願いいたします。

    • とし より:

      jqueryとjquerymobileのjsの間に以下のjsファイルを用意して、現象がおさまないならば、
      $(document).bind(“mobileinit”, function(){
      $.mobile.ajaxEnabled = false;
      $.mobile.pushStateEnabled = false
      })

      location.hashへの変更の処理を無効にするように以下の設定を追加してみるといいかもしれません。
      $.mobile.hashListeningEnabled = false;

      ※ただ上記設定にすると、1ページ内にいくつものページがあるような書き方をしてページ遷移させている場合にそれが使えなくなります。
      http://example.com/#test みたいなことをしても

      の箇所が表示されなくなります。
  3. マナ より:

    ご回答ありがとうございます。
    他にも色々調べてみて
    $(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の内容で表示されるのですが、サイトの内容と構成を考えると、私の作りたいサイトでは戻るボタンを利用する方が多いと思われるので、どうにか回避できないものかと思っております。
    お忙しいかと存じますが、よろしくお願いいたします。

  4. マナ より:

    追記です。
    ページAからページBへのリンクの際に
    入れ子上のリストからのリンクににした場合とそうでないリンクの場合で挙動が違っていました。

    リンクリスト

    ページAへ

    ページAへ

    とすると
    上のリンクの場合はページ1→入れ子のリスト→ページ2へ進み、
    ブラウザバックでページ2→入れ子のリスト→ページ1と進むようになりますが、
    このようにして戻ると、正常に表示されました。

    下の場合のようにページAから直接ページBへ飛ぶような場合にブラウザバックを使うと
    正常に表示できないようです。
    よろしくお願いします。

  5. マナ より:

    すいません表示がうまくいかなかったので…
    <ul data-role=”listview”>
    <li>リンクリスト
    <ul>
    <li><a href=”pageB.html” data-ajax=”false”>ページAへ</a></li>
    </ul>
    </li>
    <li><a href=”pageB.html” data-ajax=”false”>ページAへ</a></li>
    </ul>

    • とし より:

      階層型リストを使っているんですね。
      その場合だと、厳しいかもしれません。

      もし、やるなら別ページにするのではなくて

      &lt;a href=&quot;./sample.html#pageB&quot;&gt;ページB&lt;/a&gt;
      

      のようにして同一ページ内で遷移させるとかですね。

  6. マナ より:

    ご回答ありがとうございます。
    リストにした場合もしなかった場合でも同様だったので回避できないのかもしれないですね…
    お時間いただき、ありがとうございました。

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 ↑