如何使用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);
}