私はcordovaInAppBrowserを使用して、アプリの外部サイトのコンテンツを表示しています。iPhoneでブラウザを開くと、InAppBrowserの下部に、ブラウザを閉じたり、前後に移動したりするためのボタンがいくつかあります。AndroidデバイスのInAppBrowserにはそのようなボタンがなく、ユーザーがブラウザーを閉じるための明確な方法がありません。
プログラムでInAppBrowserを閉じる方法を知っていますが、Androidデバイスを使用しているときにユーザーがInAppBrowserを閉じるにはどうすればよいですか？
ユーザーがハードウェアの戻るボタンを押してブラウザを閉じることができることは知っていますが、（1）直感的ではありません。通常、戻るボタンは「ページに戻る」を意味し、（2）最終的には動作を変更したいと思います。ブラウザを閉じるのではなく、InAppBrowser内に表示されているサイト内のページに戻るための[戻る]ボタン。
Ionic ( ionicframework.com ) および/または ngcordova ( ngcordova.com )を使用している私たちの場合。次のコードは、inappbrowser を起動し、リンクを介してダイアログを閉じ<a href="/mobile/close">close</a>ます。
$cordovaInAppBrowser.open('http://localhost:3000/#/mypath/', '_blank', options).then((event) ->
# success
return
).catch (event) ->
# error
return
$rootScope.$on '$cordovaInAppBrowser:loadstart', (e, event) ->
$log.log 'loadstart', e, event
if event.url.match('mobile/close')
$cordovaInAppBrowser.close()
Android のフッターに (iOS に似た) ネイティブの「完了」ボタンを探している人のために、cordova-plugin-inappbrowser.
更新: 2018 年 1 月
私のプル リクエストは公式のプラグイン リポジトリにマージされたので、次のリリース (>=2.0.2 になります) を待つか、Github から直接インストールできます。
cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser
元の答え
この実装は、現在 ( 2017 年 12 月 4 日) マージの承認を待っているPR #246の拡張です。それが完了したら、別の問題と PR を開き、これを master にマージします。cordova-plugin-inappbrowser
関連するオプションを含むスクリーンショットを次に示します。
場所=はい、フッター=はい
場所=いいえ、フッター=はい
location=はい、フッター=はい、closebuttoncaption=完了
location=いいえ、footer=はい、closebuttoncaption=完了、closebuttoncolor=#0000ff
location=いいえ、footer=はい、footercolor=#0000ff、closebuttoncaption=完了
location=いいえ、footer=はい、footercolor=#00ff00、closebuttoncaption=完了、closebuttoncolor=#0000ff
location=いいえ、footer=はい、footercolor=#CC000000、closebuttoncaption=完了、closebuttoncolor=#00FFFF
オプション 'location=yes' を Android と iOS で同じように動作させるには、Troy の修正を次のように変更して、if ステートメントを移動して "toolbar.addView(edittext);" を制御することをお勧めします ツールバー全体ではありません。
// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
if (getShowLocationBar()) {
toolbar.addView(edittext);
}
toolbar.addView(close);
// Add our toolbar to our main view/layout
main.addView(toolbar);
元のコードとの比較:
// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
toolbar.addView(edittext);
toolbar.addView(close);
// Don't add the toolbar if its been disabled
if (getShowLocationBar()) {
// Add our toolbar to our main view/layout
main.addView(toolbar);
}
elMarquis が述べているように、Android デバイスで「完了」ボタンを取得するには、「location=yes」を追加する必要があります。ただし、アドレス バーを表示せずに [完了] ボタンだけを表示したい場合は、cordova ソース コードを 1 つ変更するだけで簡単に実行できます。
この Google グループから情報を取得しました: https://groups.google.com/forum/?fromgroups=#!topic/phonegap/mUcBcjPISgg
段階的な手順は次のとおりです。
コルドバのソース コードをダウンロードします。
git clone https://github.com/apache/cordova-plugin-inappbrowser
ここからコモンズコーデックライブラリをダウンロードします
コルドバ プロジェクトをワークスペースにインポートする
File > Import... > Existing Projects into Workspace
ディレクトリを作成し、ダウンロードしたファイルをそこにlibsコピーします。commons-codec-1.7.jar
genます (.classpath ファイルで必要ですが、git は空のフォルダーを許可しないため、git ダウンロードには含まれません)。うまくいけば、それは他の誰かを助けます。
2016 年 4 月現在、これらの回答はかなり古くなっています。私は今これをしなければならなかったので、ここに私の経験があります。
まず、Cordova/Ionic プロジェクトがプラグインに分割されました。必要なのは、cordova-plugin-inAppBrowserリポジトリです。
ステップ1
まず、ローカルのどこかにクローンを作成するか、github/bitbucket でフォークする必要があります。(新しいプロジェクトをセットアップするたびに、複製されたリポジトリが永続的に必要になります。) 次のコマンドを使用して、リポジトリを簡単に複製できます。
git clone git@github.com:apache/cordova-plugin-inappbrowser.git
ステップ2
次に、要求された変更をプロジェクトに加える必要があります。Androidでの URL バーの動作をiOSと同じにするには、メニューバーを常に表示し、ユーザーがメニューバーを要求した場合にのみ URL バーを表示する必要があります。これを制御するコードは/src/android/InAppBrowser.javaファイルにあります。
707-716の間の行を変更する必要があります。(注: これらの行番号は、ファイルを変更すると変更される可能性があります。)
これからコードを変更する必要があります
// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
toolbar.addView(edittext);
toolbar.addView(close);
// Don't add the toolbar if its been disabled
if (getShowLocationBar()) {
// Add our toolbar to our main view/layout
main.addView(toolbar);
}
これに：
// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
if (getShowLocationBar()) {
toolbar.addView(edittext);
}
toolbar.addView(close);
main.addView(toolbar);
ここで行ったことは、常に終了/進む/戻るボタンを備えたツールバーを追加し、ユーザーが完全なバーを必要とする場合にのみ URL バーを追加することです。iOS版の挙動です。
さらに、 Androidにはネイティブの戻るボタンがあるため、進む/戻るボタンを削除したい場合は、それらをコメントアウトして、完全なメニュー バーが必要な場合にのみ追加する必要があります。したがって、コードは次のようになります。
// actionButtonContainer.addView(back);
// actionButtonContainer.addView(forward);
// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
if (getShowLocationBar()) {
toolbar.addView(edittext);
// We add this here if the user want the full bar, then we need this buttons.
actionButtonContainer.addView(back);
actionButtonContainer.addView(forward);
}
toolbar.addView(close);
ステップ3
変更したプラグインをプロジェクトに追加する必要があります。これを 1 回だけ実行する場合は、単純に実行します。
cordova plugin add https://github.com/username/cordova-plugin-inappbrowser.git
// or
cordova plugin add https://UserName@bitbucket.org/UserName/cordova-plugin-inappbrowser.git
それ以外の
cordova plugin add cordova-plugin-inappbrowser
注:cordova plugin addプロジェクトをセットアップするたびにコマンドがリポジトリからフェッチするため、変更したリポジトリを保持する必要があります。
これは、「InAppBrowser.java」を微調整することで可能になります。これが少し奇妙であることはわかっていますが、これが私が持っていた唯一の選択肢でした。しかし、Java ファイルに加えたこれらの小さな調整により、アプリのページ内で戻ることができるようになりました。
InAppBrowser.java で行う変更は次のとおりです。showWebPage メソッド内の「run」メソッドには、次のようなリスナー コードがあります。
dialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
public void onDismiss(DialogInterface dialog) {
closeDialog();
}
});
その行の下に、以下のコードを追加します。
dialog.setOnKeyListener(new DialogInterface.OnKeyListener() {
@Override
public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) {
if (event.getAction()!=KeyEvent.ACTION_DOWN)
return true;
if(keyCode==KeyEvent.KEYCODE_BACK){
goBack();
return true;
}else {
return false;
}
}
});