Cordova-InAppBrowser

このプラグインは、Cordovaアプリ内でWebブラウザーを開くために使用されます。

ステップ1-プラグインのインストール

このプラグインを使用するには、*コマンドプロンプト*ウィンドウにインストールする必要があります。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

ステップ2-[追加]ボタン

*indexl* の *inAppBrowser* ウィンドウを開くために使用するボタンを1つ追加します。

ステップ3-イベントリスナーを追加する

*index.js* の *onDeviceReady* 関数にボタンのイベントリスナーを追加しましょう。

document.getElementById("openBrowser").addEventListener("click", openBrowser);

ステップ4-関数の作成

このステップでは、アプリ内でブラウザを開く関数を作成しています。これを ref 変数に割り当てて、後でイベントリスナーを追加するために使用できます。

function openBrowser() {
   var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options = "location = yes"
   var ref = cordova.InAppBrowser.open(url, target, options);

   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...')
   }
}

*BROWSER* ボタンを押すと、画面に次の出力が表示されます。

Cordova InAppBrowser Open

コンソールもイベントをリッスンします。 URLの読み込みが開始されると loadstart イベントが発生し、URLが読み込まれると loadstop イベントが発生します。コンソールで確認できます。

Cordova InAppBrowser Console

ブラウザを閉じると、 exit イベントが発生します。

Cordova InAppBrowser Exit Console

InAppBrowserウィンドウには他の可能なオプションがあります。以下の表で説明します。

S.No	option & details
1	location ブラウザのロケーションバーをオンまたはオフにするために使用されます。値は yes または no です。
2	hidden inAppBrowserの非表示または表示に使用されます。値は yes または no です。
3	clearCache ブラウザのCookieキャッシュをクリアするために使用されます。値は yes または no です。
4	clearsessioncache セッションCookieキャッシュをクリアするために使用されます。値は yes または no です。
5	zoom Androidブラウザーのズームコントロールを非表示または表示するために使用されます。値は yes または no です。
6	hardwareback はい、ハードウェアの戻るボタンを使用して、ブラウザの履歴内を戻ることができます。いいえ戻るボタンがクリックされるとブラウザを閉じます。

他の機能には ref （参照）変数を使用できます。簡単な例を示します。イベントリスナーを削除するために使用することができます-

ref.removeEventListener(eventname, callback);

InAppBrowserを閉じるために使用できます-

ref.close();

私たちは隠されたウィンドウを開いた場合、それを表示することができます-

ref.show();

JavaScriptコードでさえInAppBrowserに注入できます-

var details = "javascript/file/url"
ref.executeScript(details, callback);

同じ概念はCSSを注入するために使用することができます-

var details = "css/file/url"
ref.inserCSS(details, callback);

Cordova-inappbrowser

Cordova-InAppBrowser

ステップ1-プラグインのインストール

ステップ2-[追加]ボタン

ステップ3-イベントリスナーを追加する

ステップ4-関数の作成

目次