web-dev-qa-db-fra.com

Comment faire en sorte que Cordova InAppBrowser fournisse à l'utilisateur un moyen de fermer le navigateur lorsqu'il utilise un appareil Android?

J'utilise cordova InAppBrowser pour afficher le contenu d'un site externe dans mon application. Lorsque j'ouvre le navigateur sur un iPhone, il y a des boutons au bas de l'InAppBrowser pour le fermer ou pour naviguer dans les deux sens. InAppBrowser sur un périphérique Android n'a pas de tels boutons et ne permet pas à l'utilisateur de fermer le navigateur.

Je sais comment fermer par programme InAppBrowser, mais comment l'utilisateur peut-il le fermer lorsqu'il utilise un périphérique Android?

Je sais que l’utilisateur peut appuyer sur le bouton retour matériel pour fermer le navigateur, mais (1) ce n’est pas intuitif - le bouton retour signifie généralement «revenir à la page précédente» bouton retour pour revenir en arrière dans le site une page affichée dans InAppBrowser, plutôt que de fermer le navigateur.

androidcordovacordova-2.0.0inappbrowser
20
Troy

Ajouter "location=yes" à la fin de votre appel placera une barre d’adresse et un bouton TERMINER en haut de la fenêtre sur Android. (Il apparaît au bas de la fenêtre sous iOS). Cliquez sur Terminé pour fermer la fenêtre.

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

Pour ceux d'entre nous qui utilisent Ionic ( ionicframework.com ) et/ou ngcordova ( ngcordova.com ). Le code suivant lancera inappbrowser, puis fermera la boîte de dialogue via un lien <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()
14
Stone

Pour ceux qui recherchent un bouton natif "Terminé" dans le pied de page pour Android (similaire à iOS), j'ai implémenté une telle fonctionnalité sur cette fourche de cordova-plugin-inappbrowser.

Mise à jour: janvier 2018

Mon demande de pull a été fusionné dans le dépôt officiel du plugin , Vous pouvez donc attendre la prochaine version (qui sera> = 2.0.2) ou installer directement à partir de Github. , par exemple:

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

Réponse originale

L'implémentation est une extension de PR # 246 qui est actuellement (4 décembre 2017) en attente d'approbation pour la fusion. Une fois que cela est fait, je vais ouvrir un numéro séparé et PR pour le fusionner dans le cordova-plugin-inappbrowser maître.

Voici quelques captures d'écran avec les options pertinentes:

location = yes, footer = yes

emplacement = non, pied de page = oui

location = yes, footer = yes, closebuttoncaption = Terminé

emplacement = non, pied de page = oui, closebuttoncaption = terminé, closebuttoncolor = # 0000ff

location = no, footer = yes, footercolor = # 0000ff, closebuttoncaption = Terminé

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

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

7
DaveAlden

Pour conserver l'option 'location = yes' à se comporter de la même manière sur Android et iOS, je suggérerais de modifier le correctif de Troy avec le changement suivant qui déplace l'instruction if pour contrôler le "toolbar.addView (edittext);" et pas la barre d'outils entière.

// 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);

Par rapport au code d'origine:

// 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);
}
5
Jello

Comme indiqué par elMarquis, vous devez ajouter "location = yes" pour obtenir le bouton "Terminé" sur un appareil Android. Toutefois, si vous souhaitez obtenir le bouton Terminé par lui-même, sans la barre d'adresse, il est assez facile à effectuer en apportant une modification au code source de Cordova.

J'ai obtenu les informations de ce groupe Google: https://groups.google.com/forum/?fromgroups=#!topic/phonegap/mUcBcjPISgg

Voici quelques instructions pas à pas:

  1. Téléchargez le code source cordova: 

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

  2. Téléchargez le codec commons lib à partir de ici

  3. Ouvrez les outils de développement Android

  4. Importez le projet cordova dans votre espace de travail 

    File > Import... > Existing Projects into Workspace

  5. Créez un répertoire libs et copiez-y le fichier commons-codec-1.7.jar téléchargé.

  6. Ajouter un dossier gen au projet (requis par le fichier .classpath, mais non inclus dans le téléchargement de git car git n'autorise pas les dossiers vides)
  7. Allez dans Projet> Tout construire. Le projet devrait construire sans erreurs.
  8. Ouvrez InAppBrowser.Java et recherchez "toolbar.addView (edittext);" (ligne 468 dans la version cordova que j'ai téléchargée).
  9. Commentez cette ligne.
  10. Construisez le projet à nouveau.
  11. Copiez le fichier bin/cordova.jar dans le projet dans lequel vous utilisez cordova.

Espérons que cela aide quelqu'un d'autre.

4
Troy

En avril 2016, ces réponses sont plutôt obsolètes. Je devais le faire maintenant, alors voici mon expérience. 

Tout d’abord, le projet Cordova/Ionic a été découpé en plugins. Ce dont nous aurons besoin, c’est le cordova-plugin-inAppBrowser repo.

ÉTAPE 1

Nous devons d’abord le cloner quelque part localement ou le placer sur github/bitbucket. (Nous aurons besoin de notre référentiel cloné en permanence pour chaque nouvelle configuration de projet.) Nous pouvons facilement cloner le référentiel avec cette commande: 

git clone [email protected]:Apache/cordova-plugin-inappbrowser.git

ÉTAPE 2

Ensuite, nous devons apporter les modifications demandées au projet. Pour que le comportement de la barre d’URL sur Android soit identique à celui de iOS, nous devons toujours afficher la barre de menu et afficher la barre d’URL uniquement si l’utilisateur demande la barre de menu. Le code qui contrôle ceci est dans le fichier /src/Android/InAppBrowser.Java.

Nous devons changer les lignes entre 707-716 . (Remarque: ces numéros de ligne peuvent changer s’ils modifient le fichier.)

Nous devons changer le code de cette

// 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);
}

pour ça: 

// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
if (getShowLocationBar()) {
    toolbar.addView(edittext);
}
toolbar.addView(close);

main.addView(toolbar);

Nous avons donc ajouté ici les barres d’outils toujours avec les boutons Exit/Forward/Back et ajouter la barre d’URL seulement si l’utilisateur veut la barre complète. C'est le comportement de la version iOS. 

De plus, si nous voulons supprimer les boutons Précédent/Suivant parce que Android possède un bouton Précédent natif, nous devons les commenter et les ajouter uniquement si l’utilisateur souhaite utiliser la barre de menus complète. Donc, notre code devrait ressembler à ceci: 

// 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);

ÉTAPE 3

Nous devons ajouter le plugin modifié à notre projet, si vous ne voulez que cela une seule fois, lancez simplement 

cordova plugin add https://github.com/username/cordova-plugin-inappbrowser.git
// or
cordova plugin add https://[email protected]/UserName/cordova-plugin-inappbrowser.git

au lieu de 

cordova plugin add cordova-plugin-inappbrowser

Remarque: vous devez conserver votre référentiel modifié car la commande cordova plugin add récupère le contenu de votre référentiel chaque fois que vous configurez votre projet. 

2
NoNameProvided

Je viens de trouver une solution qui pourrait mieux répondre à vos besoins et/ou aider d’autres personnes.

En résumé, vous pouvez créer une page HTML "factice", ajouter du code JavaScript dans votre application pour détecter le moment où cette page est chargée et, le cas échéant, fermer InAppBrowser.

Voir ici: Phonegap build - Ouvre une page externe dans InAppBrowser ou un childbrowser sans barre d’outils et fermez-le?

0
Matty J

Ceci est possible en ajustant le fichier 'InAppBrowser.Java'. Je sais que c'est un peu bizarre mais c'est le seul choix que j'ai eu. Mais ces petites modifications apportées au fichier Java me permettent maintenant de naviguer dans les pages de mon application.

Voici la modification à apporter dans InAppBrowser.Java, Dans la méthode 'run' de la méthode showWebPage, il y aura un code d'écouteur similaire à ceci

dialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
                    public void onDismiss(DialogInterface dialog) {     
                        closeDialog();
                    }
});

En dessous de cette ligne, ajoutez le code ci-dessous,

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;
          }
      }
});
0
Suresh Raja