web-dev-qa-db-fra.com

Gérer le bouton arrière Android sur Phonegap InAppBrowser

Je souhaite désactiver ou remplacer le bouton Précédent d'Android lorsque je navigue dans les pages de InAppBrowser. Puis-je ajouter un écouteur d'événement capable de gérer cela?

EDIT: En regardant la réponse de @T_D ci-dessous, les solutions fournies sont celles qui me rapprochent le plus. Il ne semble pas possible de remplacer le bouton dans InAppBrowser, car tous les réglages de PhoneGap cessent de fonctionner lors de la navigation dans les pages de ce plugin. Je n'ai pas été en mesure de trouver une autre solution plutôt que de modifier la bibliothèque d'API. S'il y a des gars de PhoneGap ici et qu'ils connaissent quelque chose de plus, je serai heureux de recevoir des commentaires. Merci.

Le plus proche que j'ai eu:

var ref = window.open('http://Apache.org', '_blank', 'location=yes');
ref.addEventListener("backbutton", function () { })
androidcordovainappbrowser
8
Dimosthenis Kontogiorgos

Selon le documentation , le comportement du bouton de retour matériel peut être configuré maintenant pour InAppBrowser:

hardwareback: définissez sur yes pour utiliser le bouton retour du matériel afin de revenir en arrière dans l'historique InAppBrowser. S'il n'y a pas de page précédente, InAppBrowser se ferme. La valeur par défaut est yes, vous devez donc la définir sur no si vous souhaitez que le bouton Précédent ferme simplement InAppBrowser.

Merci à Kris Erickson .

Il suffit donc de mettre à jour votre plug-in InAppBrowser si la navigation en arrière est le comportement souhaité.

Pour plus de détails, voir: https://github.com/Apache/cordova-plugin-inappbrowser/pull/86

8
lhaferkamp

J'avais le même problème et finalement je l'ai mis au travail, je posterai la réponse ici au cas où cela aiderait quelqu'un.

C'est le code que j'utilise:

window.new_window = window.open(url, '_blank', 'location=no');

window.new_window.addEventListener("exit", function () {
    window.new_window.close();
});

Donc, la clé consiste essentiellement à attacher le exit event, qui est appelé lorsque le bouton de retour de l’appareil est exploité.

En passant, j’ai utilisé cordova.js et construit mes applications localement à l’aide du Cordova CLI , je ne sais pas si cela fait une différence, je le mentionne juste au cas où.

4
Albert

EDIT NOTE: Pour autant que je sache, il n'est pas possible de remplacer le bouton Précédent pour InAppBrowser dans PhoneGap. Mais j'ai fait de mon mieux pour chercher des solutions possibles ...

Il existe un eventListener pour remplacer le bouton Précédent dans PhoneGap - ne fonctionne pas pour InAppBrowser -

function onDeviceReady(){
    document.addEventListener("backbutton", onBackKeyDown, false);
}

EventListener alternatif pour remplacer le bouton précédent - l'OP a déclaré que cela ne fonctionnait pas non plus -

var ref = window.open('http://www.stackoverflow.com', '_blank', 'location=yes');
ref.addEventListener("backbutton", function () {
    //logic here
})

Remplacer le bouton Précédent dans une activité - il s’agit bien de Java, cela ne fonctionnait évidemment pas dans PhoneGap -

@Override
public void onBackPressed()
{
   //logic here
}

Conclusion :

Les solutions ci-dessus ne fonctionnaient pas, les liens suivants ( cette réponse , celui-ci et un troisième ) n’ont pas aidé non plus. Il est donc fort possible que le remplacement du bouton Précédent pour InAppBrowser dans PhoneGap ne soit pas possible. Si quelqu'un trouve une solution ou si les choses changent pour une nouvelle version de PhoneGap, n'hésitez pas à nous le faire savoir ...

EDIT:

L'installation de ce plugin peut vous amener à la solution la plus proche: 

cordova plugin add org.Apache.cordova.inappbrowse

Ce que fera ce plugin, dans WP8 , il recouvrira précédent/suivant/ferme le bouton sur InAppBrowser chaque fois que vous ouvrez un lien ou une page dans ce dernier. 

Voir cette image: enter image description here

4
T_D

Vous pouvez le faire assez facilement maintenant (à partir de InAppBrowser version 0.3.3), mais vous devrez éditer les fichiers Java. Accédez au répertoire src/com/org/Apache/corodova/inappbrowser et modifiez le fichier InAppBrowserDialog.Java:

Changement

 public void onBackPressed () {
    if (this.inAppBrowser == null) {
        this.dismiss();
    } else {
        // better to go through the in inAppBrowser
        // because it does a clean up            
        this.inAppBrowser.closeDialog();           
    }
}

à 

public void onBackPressed () {
    if (this.inAppBrowser == null) {
        this.dismiss();
    } else {
        if (this.inAppBrowser.canGoBack()) {
            this.inAppBrowser.goBack();
        }  else {
            this.inAppBrowser.closeDialog();
        }
    }
}

Ensuite, accédez à InAppBrowser et recherchez la fonction goBack, modifiez:

/**
 * Checks to see if it is possible to go back one page in history, then does so.
 */
private void goBack() {
    if (this.inAppWebView.canGoBack()) {
        this.inAppWebView.goBack();
    }
}

à

/**
 * Checks to see if it is possible to go back one page in history, then does so.
 */
public void goBack() {
    if (this.inAppWebView.canGoBack()) {
        this.inAppWebView.goBack();
    }
}

public boolean canGoBack() {
    return this.inAppWebView.canGoBack();
}

Et maintenant, le bouton de retour du matériel reviendra jusqu'à ce qu'il n'y ait plus de dos à faire. Je pense vraiment que cela devrait être le comportement par défaut sous Android puisque le bouton Terminé ferme déjà la fenêtre InAppBrowser.

4
Kris Erickson

Cela a fonctionné pour moi dans PhoneGap 2.7, l’aide est venue d’ici, Comment désactiver le bouton Précédent Android sur une page et changer pour quitter le bouton toutes les deux pages

document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        document.addEventListener("backbutton", function (e) {
            e.preventDefault();
        }, false );
}
4
JamesRLamar

Utilisez jQuery mobile:

$(document).on('backbutton',
 function(e){
     e.preventDefault();
     // YOUR CODE GOES HERE
});
3
Marcin S.

Lancement de Cordova 5.1.1 et lorsque je charge des pages dans inappbroswer, j’aime bien que le bouton Précédent fonctionne jusqu’à ce que inappbrowser revienne sur ma page index.html, car elle est vide et reste en place. J'ai donc utilisé le code suivant pour résoudre ce problème. Il quitte l'application lorsqu'il quitte le inappbrowser.

window.open = cordova.InAppBrowser.open;                
            var ref = window.open(url, '_blank', 'location=no');
            ref.addEventListener('exit', function () {
                navigator.app.exitApp();
            });
3
Helzgate

Autant que je sache, il n'est pas possible de remplacer ou de détecter le bouton retour de inAppBrowser. Lorsque vous appuyez sur le bouton Précédent, inAppBrowser masque et retourne le contrôle à la page Phonegap. Vous pouvez intercepter ceci avec l’événement focus dans la fenêtre (avec jQuery) comme

var browser = window.open('http://example.com', '_blank', 'location=no');
$(window).on('focus', function() {
    browser.show();
});

pour rouvrir le navigateur. Vous pouvez ensuite utiliser browser.executeScript() pour signaler à l'application Web chargée dans le navigateur, si vous le souhaitez.

Inspiré par cet article du forum .

0
wvengen

Je sais que cette question a déjà une réponse, mais je publie ma réponse pour ceux pour qui aucune de ces réponses n'a fonctionné pour eux (comme moi-même):

j'ai donc une application multi-pages pour Android et IOS. J'utilise cordova 5.x et j'ai ajouté le code ci-dessous dans chaque page, sauf sur la page où j'avais besoin d'InAppBrowser:

delete window.open;

et ensuite pour le reste des pages que j'ai utilisées: 

document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(event) {
// your code for handling back button comes here
}

pour le bouton de retour

notez que: delete window.open; base sur le documentation

restaurer manuellement le comportement par défaut de 'window.open'

après cela, le plug-in InAppBrowser a bien fonctionné et j'ai correctement géré le bouton de retour dans toutes les pages.

une dernière chose, n'oubliez pas d'ajouter: <script type="text/javascript" charset="utf-8" src="cordova.js"></script> dans les pages vous devez avoir InAppBrowser.

espérons cette aide.

0
pouya