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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With