12

Control or Disable Browser Back Button with Javascript or AngularJS

Here i am not asking a question but i want to show a solution to how you can disable and control Browser's Back Button if you are using AngularJS or even with Javascript

Wael
  • 455
  • 1
  • 4
  • 17
  • For your angularjs part, just use this article http://stackoverflow.com/questions/15813850/detect-history-back-using-angular , there are a bunch of similiar questions so don't post immediately... – Fer To Mar 30 '15 at 11:52
  • @FerTo http://stackoverflow.com/help/self-answer – Dave Rager Jan 26 '16 at 19:13

1 Answers1

15

If you are just using Javascript you can check how you can disable Back Button from this link:

http://jordanhollinger.com/2012/06/08/disable-the-back-button-using-html5/

But this code above will not work well with AngularJS because AngularJS uses URL_Hash # in the background, so here i will show how you can turn around:

In your main Javascript Code (Not inside AngularJS Code or controler), put the following code:

// *** Author: Wael Sidawi
// ****  Deactive Back Button **** 
var history_api = typeof history.pushState !== 'undefined';
// history.pushState must be called out side of AngularJS Code
if ( history_api ) history.pushState(null, '', '#StayHere');  // After the # you should write something, do not leave it empty

And now inside your AngularJS Controler put the following event listner:

/**
 * Event-Listner for Back-Button
 */
$scope.$on('$locationChangeStart', function(event, next, current){            
    // Here you can take the control and call your own functions:
    alert('Sorry ! Back Button is disabled');
    // Prevent the browser default action (Going back):
    event.preventDefault();            
});

I hope it could help you.

Best Regards

Wael

Wael
  • 455
  • 1
  • 4
  • 17