Cordova backbutton事件无法正常工作

Question

I am currently using Apache Cordova version 5.1.1 to build native apps for iOS and Android. Everything seems to be working fine, except the backbutton event inside of Android.

I would like to use the back button to navigate through the app's screens (the app is built using Framework7 ), but for some reason the backbutton event never triggers. Here's a review of the (simplified) code that I am using:

if( window.cordova )
{
    document.addEventListener("deviceready", function() { MRC.init(); }, false);
}

var MRC = 
{
    init: function()
    {
        if( window.cordova )
        {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);

            // Prevent the back button:
            document.addEventListener("backbutton", function(e) {

                e.preventDefault();
                MRC.view.router.back();

                return false;

            }, false);
        }
    }f
}

Everything inside of the init() function works, but the backbutton event listener never triggers, and when a user presses their hardware back button on an Android device, the app closes, rather than going to the previous view.

According to Cordova's documentation:

This is an event that fires when the user presses the back button.

 document.addEventListener("backbutton", yourCallbackFunction, false); 

Details

If you need to override the default back button behaviour you can register an event listener for the 'backbutton' event. It is no longer necessary to call any other method to over ride the back button behaviour. Now, you only need to register an event listener for 'backbutton'.

Typically, you will want to attach an event listener with document.addEventListener once you receive the Cordova 'deviceready' event.

Supported Platforms

• Android
• BlackBerry WebWorks (OS 5.0 and higher)
• Windows Phone 7 and 8

Has anyone encountered a similar problem here, or is there a workaround that I have missed?

Answer 1

Now, I do not know how well this works on Windows Phone and Webworks, but another easy way to catch the back button is to properly use the HTML5 history.pushState API. Simply speaking this means that if you load up your app in the browser that the URL is changing with each navigation through the app and if properly implemented this even means that things like 'resume from memory' will work perfectly (something that's often not the case for phonegap apps) and thus is better than binding the backbutton event. It seems that framework7 supports this using the pushState: true option on the Framework7() init. To be honest I am somewhat worried by the fact that in the description they say

If you develop web app (not PhoneGap or Home Screen web app) it is useful to enable

Which goes directly against my own experience and makes me worry that the Framework7 implementation has some rough edges, but maybe this is just a problem on IE or something? (The only proper implementation of a history supported PhoneGap app I build was for Android and ran on top of Chrome (as is the default for the newest PhoneGap apps I think))

Answer 2

//var APP_PLUGIN_NAME = Number(cordova.platformVersion.split('.')[0]) >= 4 ? 'CoreAndroid' : 'App';
var APP_PLUGIN_NAME ='App'

Please try this above the code cordova.js. Your issue will resolve.Even i am also faced same problem when i upgrade cordova version from 3.6.6 to 5.1.1