Geek Answers Handbook

Disable back button for one page

I need to disable the back button of the browser in my single page application. I tried using methods such as onhashchange or window.history.forward , but they do not work (the reason may be that the URL does not change here) Please help! Thanks.

+5
source share
7 answers

I work in AngularJS, creating a one-page application, and I wanted to disable or prevent the back button in the browser because my application has buttons and bindings for all events in my application.

I searched and tested a lot of codes, and this is easy to prevent browsers' back button, and the following code worked for me.

window.onpopstate = function (e) {window.history.forward (1); }

When history discovers first history.back ()

window.onpopstate

then after this moment for the onpopstate event any backward or forward in the history will be detected.

+11
source

I don't think disabling the back button will really work. There are so many reasons for this, but look at this . A better solution would alert the user with

window.onbeforeunload = function() { return "You will leave this page"; };
+3
source

You technically cannot turn off the back button on any browser, however you can make the button not accessible or continue to load the same page.

You can check it here. Disabling the back button.

+3
source

You can redirect the same page using the back button, your page will be updated, but you will be on the same page every time

+2
source

I think "onpopstate" does not work unless the user clicked a button

just use

 window.onbeforeunload = function() { window.history.forward(1); };

or if u like to warn the user

 window.onbeforeunload = function() { return "Back button is not available!"; window.history.forward(1); };
+1
source

If you are using AngularJS, the following code should do the trick. You must add this code to the app.js file or file, where you enter all your dependencies

 var myApp = angular.module('myApp', ['ngMask', 'ngRoute', 'ngAnimate', 'ngSanitize', 'ngTouch', 'ngCookies', 'ngMessages', 'ui.router', 'ui.grid', 'ui.directives', 'ui.filters', 'ui.bootstrap', 'angularUtils.directives.dirPagination']); myApp.run(function($rootScope, $route, $location) { var allowNav = false; var checkNav = false; $rootScope.$on('$stateChangeSuccess', function (event, toState, toStateParams, fromState, fromStateParams) { allowNav = checkNav; checkNav = true; }); $rootScope.$on('$locationChangeStart', function (event, next, current) { // Prevent the browser default action (Going back) if (checkNav) { if (!allowNav) { event.preventDefault(); } else { allowNav = false; } } }); });
+1
source

I had another scenario where we wanted to blacklist several pages. Allowing most SPA to use the back button and multiple pages to prevent this. I created a service to override popstate functionality. However, I ran into some strange problem, moving forward.

 import { RouteAddress } from 'app/common/constants/routes.constants'; import { Injectable } from '@angular/core'; import { StringUtilsService } from 'app/common/services/utilities/string-utils.service'; @Injectable() export class LocationStrategyService { private static shouldSkip = false; // Array of route urls that we can't go back to. private static blackListed = [ RouteAddress.ScreeningStepTwoCreditAvailability, RouteAddress.ScreeningStepTwo]; constructor() { window.onpopstate = this.overridingPopState; } overridingPopState(event: any) { // This was having issue scoping const isBlackListed = (navigatingTo: string): boolean => { navigatingTo = navigatingTo.split('?')[0]; const pathFound = LocationStrategyService.blackListed.find((route) => navigatingTo.endsWith('/' + route)); return pathFound !== undefined && pathFound.length > 0; } // have black listed route and determing if able to go back if (!LocationStrategyService.shouldSkip && isBlackListed(event.currentTarget.location.pathname)) { window.history.forward(); // Protecting against a going forward that will redirect LocationStrategyService.shouldSkip = isBlackListed(window.location.pathname); } else { LocationStrategyService.shouldSkip = false; } } }

Then in your AppComponent constructor add a LocationStrategyService and it will call it at startup.

 import { LocationStrategyService } from 'app/common/services/utilities/location-strategy.service'; export class AppComponent { constructor( private locationStrategyService: LocationStrategyService) {} }
0
source

More articles:


All Articles