Disable hardware back button in Ionic application?

Question

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?

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.

Solution for Ionic v2 (also v3): Link http://stackoverflow.com/a/43860391/5125608 — anlijudavid, May 09 '17 at 03:15

score 40 · Accepted Answer · edited Feb 16 '17 at 15:08

40

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

edited Feb 16 '17 at 15:08

Devid Farinelli

7,514
9
42
73

answered Oct 24 '14 at 14:52

David Dahan

10,576
11
64
137

This doesn't work for me using Ionic v1.1.0 and a Nexus 6? – Kim T Sep 11 '15 at 19:53
3

Actually it does work, but only on top level states from 'sectionA' to 'sectionB' but not 'sectionA.subsectionA' to 'sectionA.subsectionB' – Kim T Sep 11 '15 at 21:03
@KimT Yes you are absolutely right. Did you find any solution, how to disable device back button in nested views? – DevSab Aug 27 '17 at 14:29
1

To fix ionic view animations I used: $rootScope.$on('$stateChangeStart'); and set the correct direction in the view: $ionicViewSwitcher.nextDirection(direction); – Kim T Sep 08 '17 at 19:38
How can we prevent/disable the back button when a loading is present in Ionic4? – Arj 1411 Apr 12 '19 at 09:21

score 23 · Answer 2 · edited Feb 16 '17 at 15:08

23

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

this will prevent back button functionality.

edited Feb 16 '17 at 15:08

Devid Farinelli

7,514
9
42
73

answered Dec 22 '14 at 13:50

Muhammad Faizan Khan

10,013
18
97
186

Weston Ganger · Answer 3 · 2018-05-06T15:39:53.793

14

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.

edited May 06 '18 at 15:39

answered Sep 09 '15 at 20:08

Weston Ganger

6,324
4
41
39

This doesn't work for me using Ionic v1.1.0 and a Nexus 6? – Kim T Sep 11 '15 at 19:56
2

Actually it does work, but only on top level states from 'sectionA' to 'sectionB' but not 'sectionA.subsectionA' to 'sectionA.subsectionB' – Kim T Sep 11 '15 at 21:02

score 4 · Answer 4 · answered Aug 25 '16 at 14:16

4

Its simple trick prevent go back to single page:

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

       })`

answered Aug 25 '16 at 14:16

Niv Kapade

41
3

score 2 · Answer 5 · answered Oct 24 '14 at 13:26

2

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

Using your code:

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

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

answered Oct 24 '14 at 13:26

Tautologistics

1,488
12
12

Still no effect :( I guess it's because I'm using Ionic (which include Cordova). – David Dahan Oct 24 '14 at 13:55

score 2 · Answer 6 · answered Nov 02 '16 at 09:24

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

Al-Mothafar · Answer 7 · 2016-11-27T09:54:31.743

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"

score 1 · Answer 8 · answered Apr 16 '18 at 18:30

For Ionic 3:

// root component
export class MyApp {

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

  customBackButtonHandler() {
    ...
  }

}

Disable hardware back button in Ionic application?

8 Answers8

Linked