[js]iOS9でajax後のwindow.location切り替えができない現象が発生


[まとめ] 現在開催中のKindleセール情報はこちら

charts

以前、世界中のiTunes音楽のランキングを連続視聴できる「iTunes charts player」というサイトを作りました。

このサイト、YoutubeアイコンをクリックするとYoutube APIを使って該当のPVを表示できるようにしていたのですが、iOS9のiPhoneでYotubeアイコンをクリックしたところ別ウインドウが開いた状態で止まってしまい、サイト側に戻ってページの再読み込みを行っても一向に更新がかからなくなってしまうという現象が発生しました。

タブを一度閉じてサイトを開きなおせば問題なく表示はできるのですが、Youtubeアイコンをクリックするとまた固まってしまいます。

jsでは以下のようなYotubeUrl取得の関数を用意しておいて(関数名がよくないですね)、Youtubeアイコンがクリックされた際に実行するようにしていました。

# before

  function getYoutubeId(query) {
    var url = 'https://www.googleapis.com/youtube/v3/search?maxResults=1&type=video&part=id&q=' + query + '&key=YoutubeApiKey';
    var win = window.open('about:blank');  // 空のwindowを開く
    $.getJSON(url, function(data) {  // ajaxでYoutubeAPIにアクセス
      var movie = data.items[0];
      if (movie) {
        playerPause();
        win.location.href = 'https://www.youtube.com/watch?v=' + movie.id.videoId;  // 該当のPVが見つかったらurlを書き換え
      } else {
        win.close();
        alert('sorry. can not find youtube movie.');
      }
    });
  }

調べてみるとStack Overflowに同様の現象が報告されていました。

How to fix window.location issue in iOS9 UIWebview – Stack Overflow

どうやらiOS9のバグのようで、window.location.hrefをjs内で切り替えても、次のイベントループが来るまではlocation.hrefを切り替えることができないらしく、解決方法としてはsetTimeoutを使うことで次のイベントループに移るので、そこでlocation.href切り替える、という方法が提示されていました。

というわけで、先ほどのコードを更新

# after

  function getYoutubeId(query) {
    var url = 'https://www.googleapis.com/youtube/v3/search?maxResults=1&type=video&part=id&q=' + query + '&key=YoutubeApiKey';
    var win = window.open('about:blank');  // 空のwindowを開く
    $.getJSON(url, function(data) {  // ajaxでYoutubeAPIにアクセス
      var movie = data.items[0];
      if (movie) {
        playerPause();
        win.setTimeout(function() { // 次のイベントループで処理
          win.location.href = 'https://www.youtube.com/watch?v=' + movie.id.videoId;  // 該当のPVが見つかったらurlを書き換え
        }, 0);
      } else {
        win.close();
        alert('sorry. can not find youtube movie.');
      }
    });
  }

これでYoutubeリンクがちゃんと開けるようになりました。

お皿洗いとかちょっとした単純作業の時に音楽があると捗るので、よかったら使ってみてください。

iTunes charts player

フリーワードで検索した結果を連続視聴したい場合はこちら

iTunes search player

[まとめ] 現在開催中のKindleセール情報はこちら