在Ionic应用程序中禁用硬件后退按钮?

I'm trying to disable the back button on my Cordova app. I'm using AngularJS + Ionic Framework. I found topics about this and tried the code bellow, but it has absolutely no effect. Any idea? Thanks!

我想禁用Cordova应用程序的后退按钮。我使用的是AngularJS + Ionic Framework。我找到了相关的话题，并尝试了下面的代码，但绝对没有效果。任何想法?谢谢!

index.html

index . html

<head>
    <script>
      document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            document.addEventListener("backbutton", function (e) {
                e.preventDefault();
                console.log("hello");
            }, false );
        }
    </script>
</head>

Note that when I push back button, I have "hello" displayed in my console.

请注意，当我按下后退按钮时，我的控制台显示了“hello”。

8 个解决方案

#1

Finally found the answer on this Ionic Forum thread:

终于在这个离子论坛上找到了答案:

$ionicPlatform.registerBackButtonAction(function () {
  if (condition) {
    navigator.app.exitApp();
  } else {
    handle back action!
  }
}, 100);

$ionicPlatform.registerBackButtonAction allows to completly overwrite back button behavior. First param is a callback function and the secondone a priority (only the callback with the highest priority gets executed).

ionicPlatform美元。registerBackButtonAction允许完全覆盖后退按钮行为。第一个param是一个回调函数，第二个是一个优先级(只执行具有最高优先级的回调)。

#2

$ionicPlatform.registerBackButtonAction(function (event) {
    event.preventDefault();
}, 100);

this will prevent back button functionality.

这将阻止后退按钮的功能。

#3

To expand upon David D's answer I have included the go back implementation.

为了详述David D的答案，我将go back实现包括在内。

Put this in your applications .run function:

把这个放在你的应用程序中。运行函数:

$ionicPlatform.registerBackButtonAction(function (event) {
  if ($ionicHistory.currentStateName() === 'someStateName'){
    event.preventDefault();
  } else {
    $ionicHistory.goBack();
  }
}, 100);

This will not work in controllers, it is application wide.

这在控制器中是行不通的，它适用范围很广。

#4

Its simple trick prevent go back to single page:

它的简单技巧防止回到单页:

  `.controller('DashCtrl', function($scope,$ionicHistory) {
                $ionicHistory.clearCache();
                $ionicHistory.clearHistory();

       })`

#5

The example in the docs shows the event listeners — even the deviceready — being attached after the document onload event has fired.

文档中的示例显示了事件监听器(甚至是deviceready)在文档onload事件触发后被附加。

Using your code:

使用您的代码:

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

document.onload = function () {
  document.addEventListener("deviceready", onDeviceReady, false);
};

#6

To prevent App from device back button functionality use,

为了防止App从设备后退按钮功能使用，

      $ionicPlatform.registerBackButtonAction(function (event) {
           event.preventDefault();
      }, 100);

If you want to prevent the particular page use,

如果您想防止特定页面的使用，

       $ionicPlatform.registerBackButtonAction(function (event) {
           event.preventDefault();
           if ($location.path() === "/pagename" || $location.path() === "pagename") {
             navigator.app.exitApp();
           } else {
             $ionicHistory.goBack();
           }
        }, 100);

#7

To disable hardware back button in Ionic application for controller (or controller of component), you can make the following workaround, but first it is actually not for controller itself, but it combination between controllers and state, in your controller, add your normal code:

要在Ionic应用程序中禁用控制器(或组件控制器)的硬件后退按钮，您可以做以下变通，但首先它实际上不是控制器本身，而是控制器与状态的组合，在您的控制器中添加您的常规代码:

  var deRegisterHardBack = $ionicPlatform.registerBackButtonAction(
      function (event) {
        if (youConditionHere) {
          event.preventDefault();
          // do something
        } else {
          $ionicHistory.goBack();
        }
      }, 100);

But in your $stateProvider add disableHardwareBackButton like the following:

但是在您的$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
      });

Inside your module('app').run function:

在你的模块(“软件”).run函数:

$ionicPlatform.registerBackButtonAction(function(event){
   if ($state.current.disableHardwareBackButton){
      event.preventDefault();
   } else {
      $ionicHistory.goBack();
   }
}

In this way you get around the issue with "sub section" or "inside controller"

通过这种方式，您可以绕过“子节”或“内部控制器”的问题

#8

For Ionic 3:

为离子3:

// root component
export class MyApp {

  constructor(platform: Platform) {
    platform.ready().then(() => {
      platform.registerBackButtonAction(() => {
        this.customBackButtonHandler();
      }, 100)
    });
  }

  customBackButtonHandler() {
    ...
  }

}

#1