[Monaca] InAppBrowserプラグインについて

Monacaで開発するアプリは、Single Page Application（SPA）のため、HTMLの<a>等で外部サイトに画面遷移をした場合、遷移先のページに前のページに戻るリンクが設定されていないと、アプリに戻ることができません。

このような場合、InAppBrowserプラグインを使用することで、この問題を解決することができます。

InAppBrowserプラグインは、Monacaの基本Cordovaプラグインに含まれており、Basicプランから利用することができます。

InAppBrowserプラグインの使い方

まず初めに、対象のプロジェクトの「Cordovaプとラグインの設定」から、InAppBrowserプラグインを有効にします。
プロジェクトでInAppBrowserプラグインが利用できるのは、devicereadyイベント発行後になります。

<script>
  document.addEventListener("deviceready", onDeviceReady, false);
  function onDeviceReady() {
    alert("InAppBrowserプラグインが利用できます");
  }
</script>

InAppBrowserプラグインでは、起動させるプラウザーを選択することができます。

target	用途
_blank	InAppBrowserを開きます。
_system	システム標準のWebブラウザーを開きます。
_self	ホワイトリストに対象のURLが登録されている場合には、Cordova WebViewを開きます。 それ以外の場合には、InAppBrowser を開きます。

<a>からInAppBrowserプラグインを利用する

次のようにaタグを設定した場合、Monacaのページからアプリへ戻ることができません。

<a href="https://ja.monaca.io/">Monaca</a>

次のように設定することで、InAppBrowserが起動します。

<a href="#" onclick="openMonaca();">Monaca</a>

<script>
  function openMonaca() {
    window.open("https://ja.monaca.io/", '_blank', 'location=yes');
    return false;
  }
</script>

InAppBrowserでは、前の画面に戻るためのGUIを提供しているので、<a>で画面遷移をしてもアプリに戻ることができます。

InAppBrowser.executeScript

InAppBrowserプラグインでは、InAppBrowserの画面上で、指定のJavaScriptコードを実行することも可能です。

<script>
  // backgroundColorをblueに変更する。
  function openMonaca() {
    var ref = window.open("https://ja.monaca.io/", '_blank', 'location=yes');
    ref.addEventListener('loadstop', function() {
      ref.executeScript({
        code: "document.body.style.backgroundColor='blue';"
      }, function() {
        alert("Success!!");
      });
    });
    return false;
  }
</script>

InAppBrowserプラグインでは、この他にもOSごとの様々な設定等がありますので、詳しくは、InAppBrowserプラグインを参照してください。