在 Ionic 应用程序中禁用硬件后退按钮？
Posted
技术标签:
【中文标题】在 Ionic 应用程序中禁用硬件后退按钮？【英文标题】：Disable hardware back button in Ionic application? 【发布时间】：2014-12-20 07:42:20 【问题描述】：我正在尝试禁用我的 Cordova 应用程序上的后退按钮。 我正在使用 AngularJS + Ionic 框架。 我找到了有关此的主题并尝试了下面的代码，但它绝对没有效果。有什么想法吗？
index.html
<head>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
document.addEventListener("backbutton", function (e)
e.preventDefault();
console.log("hello");
, false );
</script>
</head>
请注意，当我按下返回按钮时，我的控制台中会显示“你好”。
【问题讨论】：
Ionic v2（也是v3）的解决方案：链接***.com/a/43860391/5125608 【参考方案1】：终于在thisIonic 论坛帖子上找到了答案：
$ionicPlatform.registerBackButtonAction(function ()
if (condition)
navigator.app.exitApp();
else
handle back action!
, 100);
$ionicPlatform.registerBackButtonAction 允许完全覆盖返回按钮的行为。
第一个参数是回调函数，第二个参数是优先级（只有最高优先级的回调才会被执行）。
【讨论】：
这对我使用 Ionic v1.1.0 和 Nexus 6 不起作用？ 实际上它确实有效，但仅适用于从 'sectionA' 到 'sectionB' 而不是 'sectionA.subsectionA' 到 'sectionA.subsectionB' 的***状态 @KimT 是的，你完全正确。您是否找到任何解决方案，如何在嵌套视图中禁用设备后退按钮？ 修复我使用的离子视图动画： $rootScope.$on('$stateChangeStart');并在视图中设置正确的方向： $ionicViewSwitcher.nextDirection(direction); Ionic4 中存在加载时，我们如何防止/禁用后退按钮？【参考方案2】：$ionicPlatform.registerBackButtonAction(function (event)
event.preventDefault();
, 100);
这将阻止返回按钮功能。
【讨论】：
【参考方案3】：为了扩展 David D 的回答，我已经包含了 go back 实现。
把这个放到你的应用程序.run函数中：
$ionicPlatform.registerBackButtonAction(function (event)
if ($ionicHistory.currentStateName() === 'someStateName')
event.preventDefault();
else
$ionicHistory.goBack();
, 100);
这在控制器中不起作用，它是应用程序范围内的。
【讨论】：
这对我使用 Ionic v1.1.0 和 Nexus 6 不起作用？ 实际上它确实有效，但仅适用于从 'sectionA' 到 'sectionB' 而不是 'sectionA.subsectionA' 到 'sectionA.subsectionB' 的***状态【参考方案4】：防止返回单页的简单技巧：
`.controller('DashCtrl', function($scope,$ionicHistory)
$ionicHistory.clearCache();
$ionicHistory.clearHistory();
)`
【讨论】：
【参考方案5】：docs 中的示例显示了事件侦听器 - 甚至是 deviceready - 在文档 onload 事件触发后附加。
使用您的代码：
function onDeviceReady()
document.addEventListener("backbutton", function (e)
e.preventDefault();
console.log("hello");
, false);
document.onload = function ()
document.addEventListener("deviceready", onDeviceReady, false);
;
【讨论】：
仍然没有效果 :( 我想这是因为我使用的是 Ionic（包括 Cordova）。【参考方案6】：为了防止 App 使用设备返回按钮功能，
$ionicPlatform.registerBackButtonAction(function (event)
event.preventDefault();
, 100);
如果你想阻止特定页面的使用，
$ionicPlatform.registerBackButtonAction(function (event)
event.preventDefault();
if ($location.path() === "/pagename" || $location.path() === "pagename")
navigator.app.exitApp();
else
$ionicHistory.goBack();
, 100);
【讨论】：
【参考方案7】：对于 Ionic 3：
// root component
export class MyApp
constructor(platform: Platform)
platform.ready().then(() =>
platform.registerBackButtonAction(() =>
this.customBackButtonHandler();
, 100)
);
customBackButtonHandler()
...
【讨论】：
【参考方案8】：要在控制器（或组件的控制器）的 Ionic 应用程序中禁用硬件后退按钮，您可以进行以下解决方法，但首先它实际上不是控制器本身，而是控制器和状态之间的组合，在您的控制器中，添加您的正常代码：
var deRegisterHardBack = $ionicPlatform.registerBackButtonAction(
function (event)
if (youConditionHere)
event.preventDefault();
// do something
else
$ionicHistory.goBack();
, 100);
但在你的$stateProvider 中添加disableHardwareBackButton，如下所示：
$stateProvider
.state('app.stateB',
url: '/page-b/:id',
template: '<ion-view><ion-nav-title>Sub Page </ion-nav-title>Hello</ion-view>',
disableHardwareBackButton : true
);
在你的 module('app').run 函数中：
$ionicPlatform.registerBackButtonAction(function(event)
if ($state.current.disableHardwareBackButton)
event.preventDefault();
else
$ionicHistory.goBack();
通过这种方式，您可以解决“子部分”或“内部控制器”的问题
【讨论】：
以上是关于在 Ionic 应用程序中禁用硬件后退按钮？的主要内容，如果未能解决你的问题，请参考以下文章
在 Iphone 上禁用 Progressive Web App 上的后退按钮