Question

我正在使用cordova创建混合移动应用程序，我是新手。

如果用户在主页中单击两次后退按钮，我想退出Android应用程序，但我无法处理后退按钮功能。

任何人都可以告诉我如何处理特定页面的后退按钮功能

这是我的index.html

<!DOCTYPE html>

<html>
    <head>

        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <title>Hello World</title>
    </head>
    <body>
    <div id="main" data-role="page">
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

这是我的Index.js：

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },

    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
            document.addEventListener("backbutton", function() {
                if ( $('.ui-page-active').attr('id') == 'main') {
                    exitAppPopup();
                } else {
                    history.back();             
                }
            }, false);
    },
          onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    },
        function exitAppPopup() {
        navigator.notification.confirm(
              'Exit PhoneGap ' + device.cordova + ' Demo?'
            , function(button) {
                  if (button == 2) {
                      navigator.app.exitApp();
                  } 
              }
            , 'Exit'
            , 'No,Yes'
        );  
        return false;
    }
};

app.initialize();

Answer 1

<script type="text/javascript" src="cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() 
{
if (navigator.userAgent.match("Android"))
{
    document.addEventListener("backbutton", onBackKeyDown, true);
}   
}
function onBackKeyDown(e) 
{
if (window.location.hash === "#You page name") 
{
    navigator.app.exitApp();
}
 else 
{
    window.history.back();
}


}

Answer 2

试试这个：

document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#homepage')){

    navigator.app.exitApp();
}
else {
    navigator.app.backHistory()
}
}, false);

如何使用cordova处理混合移动应用程序的后退按钮功能

2 个答案: