破棄されたブログ

このブログは破棄されました。

iPhone でブラウザバックされたときにイベントを再設定する

iPhone でページ遷移した際にキャシュが使用されると、イベントが全部死んでいる。
なんで、ページ読み込み時に設定したイベントだけでも再設定してやろうと思っていろいろ調べたものの、大人の事情で onpageshow イベントが発火しない環境。
しょうがないので、どこかで見つけた unload イベントと setTimeout を使う手法をとってみた。最初はイベント初期化関数を手動で unload イベントに設定していたものの、すごくアホくさいので、jQuery の ready() メソッドをオーバーライドして登録されるイベントを収集することにした。
ただこれだけだとまだ問題があって、unload が一度しか発火してくれないようで、複数回ブラウザバックされると、その時はイベントが無効になってしまっている。
それに、ready() 以外で登録されたイベントは救済できないし、ホントカスですね。
(キャシュつかってブラウザバックされたら強制リロードっていうのが一番な気がするけど。。。)
以下のサンプルは iPhone 様のご機嫌具合でキャシュが使われたり使われなかったりなので、動いているところが見られるか微妙。

<!DOCTYPE html>
<html>
  <head>
  <meta charset=UTF-8>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
(function($){
  var events = [];

  // jQuery の ready をオーバーライドしてコールバックを収集する
  var _ready = $.prototype.ready;
  $.prototype.ready = function() {
      events.push(arguments[0]);
      _ready.apply(this, arguments);
  };

  // イベントの再登録
  $(window).unload(function() {
    setTimeout(function(){
      for (var i = 0, l = events.length; i < l; i++) {
        events[i].apply($(window));
      }
    }, 100);
  });

  // デモ 
  var text
    , cnt = 0;
  $(document).ready(function(){
    var text = text || $("#text");
    text.text(++cnt);
  });
})(jQuery);
    </script>
  </head>
  <body>
    <!-- ブラウザバックの度にカウントアップされる(はず) -->
    <p id="text">0</p>
  </body>
</html>
広告を非表示にする