How to disable browser back button in AngularJS?

Question

enter image description here

i want disable browser back button and refresh button. in angular

example my source

page source :

"use strict";

.controller("wizardSecondController", function($scope, $state, $stateParams, wizardManager) {

$scope.$on("$viewContentLoaded", function(event, data) {
});

i want prevent browser back and refresh . please answer .

Is it really painful for you to review the answers?

Priyanka Pawar
– Priyanka Pawar

2017-01-13 12:12:04 +00:00
Commented Jan 13, 2017 at 12:12 — Priyanka Pawar
– Priyanka Pawar, Commented Jan 13, 2017 at 12:12

Pankaj Bisht · Accepted Answer · 2019-09-10 09:44:50Z

7

If you want to disable browser back button in angular, please try out the following code. It may help.

$scope.$on('$locationChangeStart', function(event, next, current){
    event.preventDefault();            
});

edited Sep 10, 2019 at 9:44

Pankaj Bisht

1,0041 gold badge9 silver badges27 bronze badges

answered Mar 27, 2017 at 7:17

Sarath K S

1141 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nebri Over a year ago

very nice, so simple!

Sarath K S Over a year ago

@sana, It works for me without any issues. It is very simple logic. Can you please check the code once again?

Rathma Over a year ago

it does not work for me, I am using ui-rouer with html5mode set to true.

Lesh_M Over a year ago

this just disables navigation completely, I don't see how it solved the problem.

Pratik Bhattacharya · Accepted Answer · 2016-10-19 10:21:13Z

1

It's not a very straight forward thing in Angular.js but you can use JavaScript function - window.onhashchange to disable to back button.

Take a look at this link, you might get better ideas.

answered Oct 19, 2016 at 10:21

Pratik Bhattacharya

3,7562 gold badges38 silver badges66 bronze badges

Comments

Santhosh Nayak · Accepted Answer · 2016-10-19 10:29:23Z

0

Use javascript event

window.onbeforeunload = function(e) {
      var dialogText = 'Dialog text here';
      e.returnValue = dialogText;
      return dialogText;
    };

refer

answered Oct 19, 2016 at 10:29

Santhosh Nayak

2,2863 gold badges35 silver badges65 bronze badges

Comments

Joehannes · Accepted Answer · 2016-11-23 09:04:37Z

0

I shall give you advice as to disabling the back button:

Strictly speaking it isn't "possible" if using standards, but there are workarounds.

There is the window.history object which includes a small API.

But it doesn't allow you to double check for states/pages before the user surfed to your site. Obviously for security reasons and not by accident or missing implementation.

There's various checks for the usage of navigating back in the history and several posts about that topic, but none is helpful as to when it comes to the point the user leaves your page and goes beyond your accessible history.

As to that, check on the events

onhashchange
onpopstate (be aware IEs implementation thereof is half-baked, even in IE11 --> in my case it didn't respond to mouse interaction, only to js history.*()

If you want to catch the user on your site for some hopefully incredibly good purpose:

Create a duplicate entry of your home page on the first homepage-hit via window.history.pushState and instantly window.history.forward() --- (this works especially well and unnoticable on SPAs)
Reiterate that procedure every time the user navigates to your homepage/lowest_level_parent_state ...

Et voila ... In my case I can't even escape our page if I hold down the backspace button ...

Another convenient option would be to put the page into fullscreen mode if feasible :)

Cheers, J

answered Nov 23, 2016 at 9:04

Joehannes

3012 silver badges9 bronze badges

2 Comments

Rathma Over a year ago

can you elaborate on your solution with more code? it is very ambiguous and I can't understand what you really mean.

Joehannes Over a year ago

1.) on landing page of your site, add a script that uses window.history.pushState to push a duplicate of the index page 2.) instantly call window.history.forward as to have one spare history item of your own page in the history 3.) repeat process everytime somebody hits the landing page (example via the back button) Sorry, can't really remember nor access the code anymore, all I can say, this really works, it's not angular specific though. Don't have time now to come up with new code, please read the manual :)

Collectives™ on Stack Overflow

How to disable browser back button in AngularJS?

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related