20

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

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

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

4

8 回答 8

15

对于我们这些使用 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()
于 2015-08-03T17:47:35.627 回答
15

对于那些在 Android（类似于 iOS）的页脚中寻找本机“完成”按钮的人，我已经在cordova-plugin-inappbrowser.

更新：2018 年 1 月

我的pull request已经合并到官方插件 repo中，所以你可以等待下一个版本（将 >=2.0.2）或直接从 Github 安装，例如：

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

原始答案

该实施是PR #246的扩展，目前（2017 年 12 月 4 日）等待批准合并。完成后，我将打开一个单独的 issue 和 PR 以将其合并回 master cordova-plugin-inappbrowser。

以下是一些带有相关选项的屏幕截图：

位置=是，页脚=是

位置=否，页脚=是

位置=是，页脚=是，关闭按钮标题=完成

位置=否，页脚=是，closebuttoncaption=完成，closebuttoncolor=#0000ff

location=no,footer=yes,footercolor=#0000ff,closebuttoncaption=完成

location=no,footer=yes,footercolor=#00ff00,closebuttoncaption=完成,closebuttoncolor=#0000ff

位置=否，页脚=是，页脚颜色=#CC000000，关闭按钮标题=完成，关闭按钮颜色=#00FFFF

于 2017-12-04T15:08:11.990 回答
11

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

var ref = window.open('http://apache.org', '_blank', 'location=yes');
于 2013-03-11T23:04:53.683 回答
5

为了保持选项“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);
}
于 2013-05-16T20:09:30.710 回答
4

正如 elMarquis 所说，您需要添加“location=yes”才能在 Android 设备上获得“完成”按钮。但是，如果您想单独获得 Done 按钮，而无需地址栏，只需对 cordova 源代码进行一次更改即可轻松完成。

我从这个 google 组获得了信息：https ://groups.google.com/forum/?fromgroups=#!topic/phonegap/mUcBcjPISgg

以下是一些分步说明：

  1. 下载科尔多瓦源代码：

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

  2. 从这里下载公共编解码器库

  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);” （我下载的科尔多瓦版本中的第 468 行）。
  9. 注释掉那一行。
  10. 再次构建项目。
  11. 将 bin/cordova.jar 文件复制到您正在使用 cordova 的任何项目中。

希望这对其他人有帮助。

于 2013-03-12T15:52:21.330 回答
2

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

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

第1步

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

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

第2步

然后我们必须对项目进行请求的更改。为了使Android上的 url bar 行为与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 步

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

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每次设置项目时该命令都会从存储库中获取。

于 2016-04-15T15:21:20.833 回答
0

刚刚遇到一个可以帮助更好地满足您的需求和/或帮助其他人的解决方案。

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

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

于 2013-11-12T00:22:09.033 回答
0

这可以通过调整“InAppBrowser.java”来实现。我知道这有点奇怪，但这是我唯一的选择。但是，我对 java 文件所做的那些小调整现在允许我在我的应用程序的页面中导航回来。

这是要在 InAppBrowser.java 中进行的更改，在 showWebPage 方法中的“运行”方法中，将有一个类似这样的侦听器代码，

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;
          }
      }
});
于 2014-05-15T05:38:26.963 回答