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:
<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!
deviceready is important. If not used, sometimes you can get blocking Back button, sometimes not. Often in debug it works, in production no.
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.
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);
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", function (e) {
e.preventDefault();
}, false );
}
You have to override back button action in device ready... here is a full working example "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://stackoverflow.com/questions/12791324/how-do-i-disable-android-back-button-on-one-page-and-change-to-exit-button-on-ev