web-dev-qa-db-fra.com

Remplacer le comportement du Backbutton Android ne fonctionne que sur la première page avec PhoneGap

J'utilise PhoneGap 1.5.0, jQuery 1.7.1 et jQuery mobile 1.0.1 et j'essaie de remplacer le bouton de retour dans Android comme indiqué ici ou ici .

document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap loaded

function onDeviceReady() {
console.log("PhoneGap Ready!");
// waiting for button
document.addEventListener("backbutton", handleBackButton, false);
}

// handle the back button
function handleBackButton() {
console.log("Back Button Pressed!");
navigator.app.exitApp();
}

Mais cela ne fonctionne que sur la première page de mon application. Après avoir changé de page, le bouton Précédent ne fait rien du tout. L'application consiste en un onglet comme celui-ci:

<body>
<div data-role="page" id="pilotTab">
    <div data-role="header">
        <h1>Pilot</h1>
    </div>
    <div data-role="content" id="pilotContent">
content be here ;)
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="pilotTab.html" data-transition="none">Lotse</a>
                </li>
                <li><a href="bookingTab.html" data-transition="none">Verkehr</a>
                </li>
                <li><a href="mainListTab.html" data-transition="none">B&ouml;rt</a>
                </li>
            </ul>
        </div>
        <!-- /navbar -->
    </div>
    <!-- /footer -->
</div>

Est-ce une erreur stupide ou y a-t-il quelque chose de spécial à considérer pour que cela fonctionne correctement? Merci d'avance.

androidcordovaoverrideback-button
17
Redfox

J'ai parcouru le nouveau code source de Phonegap et apporté les modifications suivantes pour que le bouton arrière fonctionne.

Code de test html

<script type="text/javascript">
    $("#home").click(function(){
        $.mobile.changePage("home.html");
    });

    document.addEventListener("deviceready", onDeviceReady, false);
    document.addEventListener("backbutton", handleBackButton, false);

    function onDeviceReady() {
        console.log("PhoneGap Ready!");
    }

    function handleBackButton() {
        console.log("Back Button Pressed!");
        navigator.app.exitApp();
    }
</script>

Placez le code suivant dans le bloc else de document.addEventListener dans cordova-1.5.0.js après le numéro de ligne 507

if (e === 'backbutton') {
    var exec = require('cordova/exec')
    exec(null, null, "App", "overrideBackbutton", [true]);
}

Mettez le code suivant dans la méthode fireDocumentEvent de la définition cordova dans cordova-1.5.0.js après le numéro de ligne 592

if(type == "backbutton"){
    var e = document.createEvent('Events');
    e.initEvent(type);
    if (data) {
        for (var i in data) {
            e[i] = data[i];
        }
    }
    document.dispatchEvent(e);
    return;
}

J'ai mis l'ensemble cordova-1.5.0.js dans ce Gist avec le code mis à jour https://Gist.github.com/2020325

Bien que cela fonctionne pour moi, il peut néanmoins nécessiter quelques modifications pour fonctionner dans tous les scénarios possibles.

Modifier

Mettez le code suivant dans la méthode fireDocumentEvent de la définition cordova dans cordova-1.5.0.js après le numéro de ligne 592

if(type == "backbutton" || type == "menubutton" || type == "searchbutton"){
        var e = document.createEvent('Events');
        e.initEvent(type);
        if (data) {
            for (var i in data) {
                e[i] = data[i];
            }
        }
        document.dispatchEvent(e);
        return;
    }
12
dhaval

Bryce Curtis suggère sur cette page de changer simplement de ligne:

channel.onNativeReady.subscribe(_self.boot);

à :

channel.onNativeReady.subscribeOnce(_self.boot);

à la fin du fichier.

Cela semble faire l'affaire pour moi et a fixé le bouton arrière ET le menubutton et le bouton de recherche!

8
Guillaume Gendre

@dhaval: J'ai apporté les modifications suivantes au fichier cordova-1.5.0.js sous Android.

Le bouton "Retour" des pages sur lesquelles je n’ai pas traité fonctionne bien, mais l’emplacement sur lequel je manipule le bouton Retour ne fonctionne pas.

Ce n'est même pas capable de choisir la fonction

function handleBackButton() {

  console.log("Back Button Pressed!");
    navigator.app.exitApp();
}
0
Surya