CODEWITHSUNDEEP
androidangularjscordovaionic-frameworkdom-events
David Dahan
David Dahan

Reputation: 11162

Disable hardware back button in Ionic application?

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.

Upvotes: 29

Views: 49328

Answers (8)

Weston Ganger
Weston Ganger

Reputation: 6712

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.

Upvotes: 14

Prashant G
Prashant G

Reputation: 4900

For Ionic 3:

// root component
export class MyApp {

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

  customBackButtonHandler() {
    ...
  }

}

Upvotes: 1

Muhammad Faizan Khan
Muhammad Faizan Khan

Reputation: 10551

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

this will prevent back button functionality.

Upvotes: 23

David Dahan
David Dahan

Reputation: 11162

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

Upvotes: 40

Al-Mothafar
Al-Mothafar

Reputation: 8219

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"

Upvotes: 1

S.M.Priya
S.M.Priya

Reputation: 364

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

Upvotes: 2

Niv Kapade
Niv Kapade

Reputation: 41

Its simple trick prevent go back to single page:

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

       })`

Upvotes: 4

Tautologistics
Tautologistics

Reputation: 1508

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

Upvotes: 2

Related Questions