Disable hardware back button in Ionic application?

2019-02-01 06:46发布

站内问答 / Android
788 8 6

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!

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.

8条回答
Rolldiameter
2楼-- · 2019-02-01 07:23

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).

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
3楼-- · 2019-02-01 07:24 
$ionicPlatform.registerBackButtonAction(function (event) {
    event.preventDefault();
}, 100);

this will prevent back button functionality.

查看更多
0人赞 添加讨论(0) 举报
闹够了就滚
4楼-- · 2019-02-01 07:24

Its simple trick prevent go back to single page:

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

       })`
查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
5楼-- · 2019-02-01 07:29

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

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.

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
6楼-- · 2019-02-01 07:32

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:

  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
      .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:

$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"

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
7楼-- · 2019-02-01 07:39

To prevent App from device back button functionality use,

      $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);
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)