如何在一个页面上禁用 Android 后退按钮并在所有其他页面上更改为退出按钮答案

【问题标题】：How do I disable Android Back button on one page and change to exit button on every other page如何在一个页面上禁用 Android 后退按钮并在所有其他页面上更改为退出按钮
【发布时间】：2012-09-29 06:29:20
【问题描述】：

我正在使用 Phonegap 开发一个与我的 Drupal 站点交互的 Android 应用程序。我重新分配了 Android 的“返回”按钮来提示用户从 Drupal 服务器注销，但是，我只想在登录页面上禁用它（原因很明显）。我可以让它工作，但只有在用户注销之前，一旦在登录页面上，该按钮仍然被重新分配为注销按钮。这是我到目前为止的代码：

   <head>
         <script>
        /* Wait until device is ready to re-assign Back button */
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            document.addEventListener("backbutton", onBackKeyPress, false);
        }
        function onBackKeyPress() {
            /* If the current page is the login page, disable the button completely (aka do nothing) */
            if ($.mobile.activePage.attr('id') == 'login_page') {
            }

            /* Else, execute log off code */
            else {
                if (confirm("Are you sure you want to logout?")) {
                    /* Here is where my AJAX code for logging off goes */
                }
                else {
                    return false;
                }
            }
        }
        </script>
</head>

问题是“后退”按钮没有被重新分配。当用户注销并最终回到登录页面时，我无法找到重新运行上述代码的方法。

如果有人愿意为此提供解决方案，我将非常感激！

【问题讨论】：

标签： android cordova jquery-mobile back-button-control

【解决方案1】：

设备就绪很重要。如果不使用，有时您会阻止返回按钮，有时则不会。通常在调试中它可以工作，在生产中没有。

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

编辑 2013-11-03 常见的错误是在桌面上执行开发并且排除了cordova脚本。然后忘记包含移动版本的cordova脚本。

【讨论】：

为我工作 PhoneGap 2.7

【解决方案2】：

试试这个：

document.addEventListener("backbutton", function(e){
    if($.mobile.activePage.is('#login_page')){
        e.preventDefault();
    }
    else {
        if (confirm("Are you sure you want to logout?")) {
            /* Here is where my AJAX code for logging off goes */
        }
        else {
            return false;
        }
    }
}, false);

【讨论】：

在我的项目中这样做，似乎只运行一次，所以它进入if语句，阻止默认执行返回按钮并离开，然后返回按钮在任何页面上都不起作用应用程序

【解决方案3】：

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

【讨论】：

【解决方案4】：

您必须在设备就绪时覆盖后退按钮操作... 这是一个完整的工作示例“index.html”

<!DOCTYPE html>
<html>
  <head>
    <title>Back Button</title>
    <link rel="stylesheet" type="tex`enter code here`t/css" href="style.css">
    <script>
        function getTitle() {
            document.getElementById("ct").innerHTML = "DEMO: " + document.title;
        }
    </script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
    // Wait for device API libraries to load
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
        getTitle();
    }
    // device APIs are available
    //
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }
    // Handle the back button
    //
    function onBackKeyDown() {
        alert('Backbutton key pressed');
        console.log('Backbutton key pressed');
    }
    </script>
  </head>
  <body onload="onLoad()">
  <ul id="nav">
        <li><a href="index.html">&larr; Back</a></li>
        <li><a href="#" id="ct" onclick="location.reload();"></a></li>
    </ul>
  </body>
</html>

我使用了这段代码，最后返回按钮被覆盖了......

参考--> https://github.com/amirudin/PhoneGapPluginDemo/blob/master/www/evt-backbutton.html

【讨论】：