Cordova-inappbrowser
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* ボタンを押すと、画面に次の出力が表示されます。
コンソールもイベントをリッスンします。 URLの読み込みが開始されると loadstart イベントが発生し、URLが読み込まれると loadstop イベントが発生します。 コンソールで確認できます。
ブラウザを閉じると、 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);