如何禁用一页上的 Android 后退按钮并更改为每隔一页上的退出按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12791324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I disable Android Back button on one page and change to exit button on every other page
提问by ObsoletePower
I am developing an Android application using Phonegap that interacts with my Drupal site. I have re-assigned the Android "Back" button to prompt the user to log off from the Drupal server however, I just want it disabled on the login page (for obvious reasons). I can get it to work but only until the user logs out then once on the login page the button remains re-assigned as a logoff button. Here's the code I have so far:
我正在使用 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>
The problem is that the Back button doesn't get re-assigned. I cannot figure out a way to re-run the above code when the user logs out and ends up back on the login page.
问题是后退按钮没有被重新分配。当用户注销并最终返回登录页面时，我无法找到重新运行上述代码的方法。
If anybody is willing to provide a solution for this I will be very grateful!
如果有人愿意为此提供解决方案，我将不胜感激！
回答by OSP
devicereadyis important. If not used, sometimes you can get blocking Back button, sometimes not. Often in debug it works, in production no.
deviceready很重要。如果不使用，有时您会阻止返回按钮，有时则不会。通常在调试中它有效，在生产中没有。
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", function (e) {
e.preventDefault();
}, false );
}
EDIT 2013-11-03 Common mistake is that development is performed on desktop and cordova script is excluded. One then forgets to include the cordova script for the mobile version.
编辑 2013-11-03 常见错误是在桌面上执行开发并排除了cordova 脚本。然后忘记包含移动版本的cordova脚本。
回答by A. Magalh?es
Try this:
尝试这个：
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);
回答by user2028084
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", function (e) {
e.preventDefault();
}, false );
}
回答by Baha' Al-Khateib
You have to override back button action in device ready... here is a full working example "index.html"
您必须在设备就绪时覆盖后退按钮操作......这是一个完整的工作示例“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">← Back</a></li>
<li><a href="#" id="ct" onclick="location.reload();"></a></li>
</ul>
</body>
</html>
I used this code and back button is overridden finally....
我使用了这段代码，后退按钮终于被覆盖了......
Ref--> https://github.com/amirudin/PhoneGapPluginDemo/blob/master/www/evt-backbutton.html
参考--> https://github.com/amirudin/PhoneGapPluginDemo/blob/master/www/evt-backbutton.html
