如何使用cordova InAppBrowser为用户提供在使用Android设备时关闭浏览器的方法？

Question

我正在使用cordova InAppBrowser来显示我应用中外部网站的内容。 当我在iPhone上打开浏览器时，InAppBrowser底部有一些按钮用于关闭它或来回导航。 Android设备上的InAppBrowser没有这样的按钮，并且没有明显的方式让用户关闭浏览器。

我知道如何以编程方式关闭InAppBrowser，但是在使用Android设备时用户如何关闭它？

我知道用户可以点击硬件返回按钮关闭浏览器，但（1）这不直观 - 后退按钮通常意味着“返回页面”，（2）我最终想改变行为返回按钮返回显示在InAppBrowser内部的站点内的页面，而不是关闭浏览器。

Answer 1

对于我们这些使用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()

Answer 2

在通话结束时添加"location=yes"会在Android的窗口顶部放置一个地址栏和DONE按钮。 （它出现在iOS窗口的底部）。 单击“完成”将关闭窗口。

var ref = window.open('http://apache.org', '_blank', 'location=yes');

Answer 3

对于那些在Android页脚（类似于iOS）中寻找原生“完成”按钮的人来说，我已经在这个 cordova-plugin-inappbrowser 分支上实现了这样的功能。

更新：2018年1月

我的pull请求已合并到官方插件仓库中 ，因此您可以等待下一个版本（将> = 2.0.2）或直接从Github安装，例如：

cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser

原始答案

该实施是 PR＃246的扩展，目前（ 2017年12月4日 ）正在等待批准合并。 一旦完成，我将打开一个单独的问题和PR将其合并回主 cordova-plugin-inappbrowser 。

以下是一些相关选项的截图：

位置= YES，页脚= YES

位置=没有，页脚= YES

位置= YES，页脚= YES，closebuttoncaption =完成

位置=没有，页脚= YES，closebuttoncaption =完成，closebuttoncolor =＃0000FF

位置=没有，页脚= YES，footercolor =＃0000FF，closebuttoncaption =完成

位置=没有，页脚= YES，footercolor =＃00FF00，closebuttoncaption =完成，closebuttoncolor =＃0000FF

位置=没有，页脚= YES，footercolor =＃CC000000，closebuttoncaption =完成，closebuttoncolor =＃00FFFF

Answer 4

要保持选项'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);
}

Answer 5

如elMarquis所述，您需要添加“location = yes”才能获得Android设备上的“完成”按钮。 但是，如果您想单独使用“完成”按钮，而不使用地址栏，则可以通过对cordova源代码进行一次更改来轻松完成。

我从这个谷歌群组获得了相关信息： https ： //groups.google.com/forum/？fromgroups =＃！topic / phonegap / mUcBcjPISgg

以下是一些分步说明：

1. 下载cordova源代码：

   git clone https://github.com/apache/cordova-plugin-inappbrowser

2. 从这里下载commons codec lib

3. 打开Android开发者工具

4. 将cordova项目导入您的工作区

   File > Import... > Existing Projects into Workspace

5. 创建一个libs目录并将下载的commons-codec-1.7.jar文件复制到其中。

6. 将gen文件夹添加到项目中（由.classpath文件所需，但不包含在git下载中，因为git不允许空文件夹）
7. 转到项目>全部构建。 该项目应该没有错误地构建。
8. 打开InAppBrowser.java并搜索“toolbar.addView（edittext）;” （我下载的cordova版本中的第468行）。
9. 注释掉那一行。
10. 再次构建项目。
11. 将bin / cordova.jar文件复制到您使用cordova的任何项目中。

希望这有助于其他人。

Answer 6

截至2016年4月，这些答案已经过时了。 我现在必须这样做，所以这是我的经验。

首先，Cordova / Ionic项目被切成了插件。 我们需要的是cordova-plugin-inAppBrowser repo。

第1步

首先，我们必须在本地某处克隆它或在github / bitbucket上分叉。 （对于每个新项目设置，我们都需要永久克隆的repo。）我们可以使用以下命令轻松克隆repo：

git clone git@github.com:apache/cordova-plugin-inappbrowser.git

第2步

然后我们必须对项目进行所请求的更改。 要使Android上的网址栏行为与iOS中相同，我们必须始终显示菜单栏并仅在用户请求菜单栏时显示网址栏。 控制它的代码在/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步

我们必须将修改后的插件添加到我们的项目中，如果您只需要一次，那么只需运行即可

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 

注意：您必须保留修改后的repo，因为每次设置项目时， cordova plugin add都会从存储库cordova plugin add命令fetch。

Answer 7

刚刚遇到的解决方案可能有助于更好地满足您的需求，和/或帮助其他人。

总之，您可以创建一个“虚拟”HTML页面，在应用程序中添加JavaScript以检测何时加载该页面，以及何时加载它，关闭InAppBrowser。

请参阅此处： Phonegap build - 在InAppBrowser或childbrowser中打开外部页面，没有工具栏并关闭它？

Answer 8

通过调整'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;
          }
      }
});