ノラプログラマーの技術メモ

ネットで調べても出てこなかった情報を載せていきたい技術系ブログ。

phonegapアプリ内で外部リンクをクリックしたらsafariブラウザで起動させる方法 for iPhone

概要

phonegapでスマホアプリを作ると当然、中身はHTMLなわけで外部リンクを含むこともあると思う。

ちなみにandroidは問題ないのだけれど、iphoneで外部リンクをクリックするとアプリ内ブラウザが起動してしまう。

このアプリ内ブラウザの厄介なところは拡大・縮小もできないし、元もアプリ画面に戻れないことだ。

となると例えばnend広告を貼って広告がクリックされたら元の画面に戻れないので、非常に使えないアプリになってしまうのだ。これは困る。なのでその対処方法。

環境

windows8.1
phonegap3.4.0

手順

まず「Inappbrowser」プラグインを使えるようにする。config.xmlに以下の行を追加。

<gap:plugin name="org.apache.cordova.inappbrowser" version="0.2.4" />

ちなみにアプリはphonegap buildでビルドすることを想定しています。もしローカル環境でビルドしている場合はコマンドラインでInappbrowserプラグインをインストールしてください。

次に外部サイトへのアクセス制限を解除しておく。これも同じくconfig.xmlに追加。

<access origin="*"  browserOnly="true" />

最後に、外部サイトへアクセスするhtmlファイル(例えばindex.htmlなど)に以下のjava scriptを追加する。

<script type="text/javascript" charset="utf-8">
  if(typeof device === 'undefined'){
    document.addEventListener("deviceready", onDeviceReady, false);
  }else{
    onDeviceReady();
  }

  function onDeviceReady()
  {
    var Anchors = document.getElementsByTagName("a");
    for (var i = 0; i < Anchors.length ; i++)
    {
      Anchors[i].addEventListener("click", 
        function (event)
        {
          event.preventDefault();
          window.open(encodeURI(this.href), '_system', 'location=yes');
        }, 
        false);
    }
  }
</script>

これで外部サイトへのリンクをクリックすると、safariが起動するはず。まったくiOSは手間が掛かるなあ。

f:id:kawai_norimitsu:20140719144107p:plain

ソースはgithubに置いておくので、これをzipでフォルダごと圧縮してphonegap buildにかければそのまま実機で動かせます。

あとnend広告をテストで貼ってますが、もしかしたら通信環境によって読み込みタイミングが変わるため、onDeviceReadyよりあとにnend広告が読み込まれる可能性あり。

その辺は未検証なのでご理解くださいー。