如何在一个页面上禁用 Android 后退按钮并在所有其他页面上更改为退出按钮
Posted
技术标签:
【中文标题】如何在一个页面上禁用 Android 后退按钮并在所有其他页面上更改为退出按钮【英文标题】：How do I disable Android Back button on one page and change to exit button on every other page 【发布时间】：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>
问题是“后退”按钮没有被重新分配。当用户注销并最终回到登录页面时，我无法找到重新运行上述代码的方法。
如果有人愿意为此提供解决方案，我将非常感激！
【问题讨论】：
【参考方案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">← 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
【讨论】：
以上是关于如何在一个页面上禁用 Android 后退按钮并在所有其他页面上更改为退出按钮的主要内容，如果未能解决你的问题，请参考以下文章
jquery mobile+html5 写的页面 如何禁用手机后退按钮。或者说如何禁用页面后退。