Disable browser back button for one page application

Question

I need to disable the back button of browser in my single page application. I tried using methods like onhashchange or window.history.forward but they don't work (reason may be that url doesn't get changed here)

Answer 1

I work in AngularJS building a Single Page App and I wanted to disable or prevent the back button of the browser, because my app has buttons and anchors for all navegation into my app.

I searched and test many codes, and this is the easy to prevent the back button of browsers and the following code worked for me.

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

When the history detects the first history.back()

window.onpopstate

is executed, then after this moment any back or forward in history are detected for onpopstate event.

Answer 2

import { LocationStrategy } from '@angular/common';  
 constructor( private location: LocationStrategy){  
// preventing back button in browser implemented by "Samba Siva"  
history.pushState(null, null, window.location.href);
this.location.onPopState(() => {  
history.pushState(null, null, window.location.href);
});  
}

Answer 3

I dont think disabling the back button will really work. So many reasons for same but have look at this. Your best solution will be warn the user using

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

Answer 4

You technically cannot disable the Back button on someone's browser, however, you can make it so that the button isn't available or continues to load the same page.

You can check it here Disabling the Back Button

Answer 5

You can redirect same page on click of back button, your page will get refreshed but you will be on the same page every time

Answer 6

i think the "onpopstate" dont work if the user persist click

just use

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

or if u like to warning user

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

Answer 7

If you're using AngularJS, the following code should do the trick. You have to add this code to app.js file or file where you inject 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;
            }
        }
    });
}); 

Answer 8

I had a different scenario where we wanted to blacklist a few pages. Allowing most of the SPA to use the back button and a few pages to not allow it. I created a service to override the functionality of the popstate. However I ran into a weird issue with going 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 the LocationStrategyService and it will call it on start.

import { LocationStrategyService } from 'app/common/services/utilities/location-strategy.service';
export class AppComponent {


  constructor(        
  private locationStrategyService: LocationStrategyService) {}
}