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

【问题标题】：How to handle the back button functionality for Hybrid mobile application using cordova如何使用cordova处理混合移动应用程序的后退按钮功能
【发布时间】：2016-07-04 06:05:16
【问题描述】：

我正在使用 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();

【问题讨论】：

控制台有错误吗？
控制台没有错误。我已经按照链接进行操作-->ventusmoso.com/phonegap/jquerymobile/… 教程但是。我没有得到任何答案
尝试发出警报并测试它正在破坏的地方......

标签： javascript android jquery html cordova

【解决方案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();
}


}

【讨论】：

【解决方案2】：

试试这个：

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

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

【讨论】：