Question

我正在尝试禁用Cordova应用上的后退按钮。我正在使用AngularJS + Ionic Framework。我找到了关于这个的主题并尝试了下面的代码，但它绝对没有效果。任何的想法？谢谢！

的index.html

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

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

Answer 1

终于在this Ionic Forum主题上找到了答案：

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

$ionicPlatform.registerBackButtonAction允许完全覆盖后退按钮行为。第一个参数是回调函数，第二个参数是优先级（只执行优先级最高的回调）。

Answer 2

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

这将阻止后退按钮功能。

Answer 3

为了扩展David D的答案，我已经包含了返回实施。

将其放入您的应用程序.run功能：

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

这不适用于控制器，它适用于整个应用程序。

Answer 4

它的简单技巧可以防止返回单页：

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

       })`

Answer 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);
};

Answer 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);

Answer 7

对于Ionic 3：

// root component
export class MyApp {

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

  customBackButtonHandler() {
    ...
  }

}

Answer 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
      });

在你的模块内部（'app'）。运行功能：

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

通过这种方式，您可以解决“子部分”或“内部控制器”

的问题

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

8 个答案: