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