如何在使用安卓设备时让Cordova InAppBrowser提供关闭浏览器的方法?

20

我正在使用cordova InAppBrowser在应用内展示来自外部网站的内容。当我在iPhone上打开浏览器时,InAppBrowser底部有一些按钮可用于关闭或前后导航。Android设备上的InAppBrowser没有这些按钮,也没有明显的方法让用户关闭浏览器。

我知道如何通过编程方式关闭InAppBrowser,但是当用户使用Android设备时,该如何关闭呢?

我知道用户可以按硬件返回按钮来关闭浏览器,但是(1)这不直观 - 返回按钮通常意味着“返回上一页”,而(2)我最终想改变返回按钮的行为,使其返回显示在InAppBrowser中的网站的上一页,而不是关闭浏览器。

8个回答

17

对于那些想在Android底部(类似iOS)使用原生“完成”按钮的人,我已经在cordova-plugin-inappbrowser的这个分支上实现了这样的功能,具体请查看此处

更新:2018年1月

我的pull request已经合并到官方插件仓库中, 因此你可以等待下一个发布版本(2.0.2或更高版本),或者从Github直接安装,例如:

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

原回答

The implementation is an extension of PR #246 which is currently (4 December 2017) awaiting approval to merge. Once that's done, I'll open a separate issue and PR to merge this back into the master cordova-plugin-inappbrowser.

这里有一些相关选项的屏幕截图:

location=yes, footer=yes

location=no, footer=yes

location=yes, footer=yes, closebuttoncaption=Done

location=no, footer=yes, closebuttoncaption=Done, closebuttoncolor=#0000ff

location=no, footer=yes, footercolor=#0000ff, closebuttoncaption=Done

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

location=no, footer=yes, footercolor=#CC000000, closebuttoncaption=Done, closebuttoncolor=#00FFFF


1
不错的公关,兄弟!我使用过它,真的很棒!谢谢! - girorme
1
footer=yes没有显示。有任何想法吗?iOS显示在底部,但Android没有在底部显示。 - Piraba
Phonegap CLI的“create”命令默认使用了一些相当老旧的插件。只有当我删除了默认的“inappbrowser”插件(它是1.x版本)并重新安装,才能获得最新的3.0.0版本,然后这个问题才得以解决。 - HaulinOats
精彩的回答! - Piero Alberto

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()

2
请注意,此答案假定您对在框架中加载的页面具有控制权(或者至少知道它包含某个链接)。如果您想加载任意URL(并让用户自由导航),同时仍然为用户提供关闭InAppBrowser的选项,则可能需要在IAB之外放置一个按钮。但是,如果您控制加载的页面,则这可能是最简单的解决方案。另一种选择是localstorage polling - jakub.g

11

在Android上,在您的调用结尾添加"location=yes"将会在窗口顶部放置地址栏和“完成”按钮(在iOS中它将出现在窗口底部)。点击“完成”将关闭窗口。

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

2
我必须显示丑陋的地址栏才能在Android上获得“完成”按钮?天啊,这太糟糕了...我有点喜欢iOS设备上的工作方式(没有地址栏,但仍然有一个“完成”按钮)。我想随着项目的成熟,InAppBrowser开发人员将会获得更多一致性和更多选项...我会再等一段时间看看是否还有其他人有任何想法。如果没有,我会将您的答案标记为接受的答案。感谢您的回答! - Troy
是的,我还没有找到一种不需要地址栏的方法。我同意这很丑陋。如果有人提出任何建议,我很高兴看看。我也很想摆脱地址栏,只留下一个“完成”按钮。 - elMarquis
我找到了一种相当简单的方法,可以在不删除“完成”按钮的情况下删除地址栏。说明在我发布的答案中。我仍将此标记为“已接受的答案”,因为它回答了原始问题。 - Troy
1
DaveAlden的帖子应该是这个问题的正确答案。 - Piero Alberto
这已经改变了,它不再那样做了。 - Ctfrancia

5
为了让选项“location=yes”在Android和iOS上的行为保持一致,我建议将特洛伊的修复进行修改,具体操作是将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);
}

太棒了。正是我想要的东西,以我想要的方式。 - AtanuCSE

4
如elMarquis所述,您需要添加“location = yes”才能在Android设备上获得“完成”按钮。但是,如果您想单独获取“完成”按钮,而不带地址栏,则只需对cordova源代码进行一次更改即可轻松实现。
我从这个Google小组中获取了信息: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 Developer Tools
  4. 将cordova项目导入到您的工作区中

    File > Import... > Existing Projects into Workspace

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

  6. 向项目添加一个gen文件夹(由.classpath文件需要,但不包括在git下载中,因为git不允许空文件夹)
  7. 转到Project > Build All。 项目应该能够无错误地构建。
  8. 打开InAppBrowser.java并搜索"toolbar.addView(edittext);"(我下载的cordova版本中的第468行)。
  9. 将该行注释掉。
  10. 再次构建项目。
  11. 将bin/cordova.jar文件复制到您正在使用cordova的任何项目中。

希望这能帮助到其他人。


6
这并不容易……如果你能为Apache源代码做出贡献那就太好了。 - akuz

2
截至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:
我们需要将修改后的插件添加到我们的项目中,如果您只想执行一次,则只需运行
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命令都会从您的存储库中获取它。

0

0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接