禁用一页应用程序的浏览器后退按钮

我需要在单页面应用程序中禁用浏览器的后退按钮。 我尝试使用像onhashchange或window.history.forward这样的方法，但它们不起作用（原因可能是这里的url没有改变）请帮忙！ 谢谢。

Answer 1

我在AngularJS工作，构建一个单页应用程序，我想禁用或阻止浏览器的后退按钮，因为我的应用程序有按钮和锚点，所有navgation进入我的应用程序。

我搜索并测试了很多代码，这很容易阻止浏览器的后退按钮和以下代码为我工作。

window.onpopstate = function（e）{window.history.forward（1）; }

当历史记录检测到第一个history.back（）时

window.onpopstate

执行后，然后在此时刻之后检测历史中的任何后退或前进以用于onpopstate事件。

Answer 2

我不认为禁用后退按钮将真正起作用。 这么多的原因，但看看这个 。 您的最佳解决方案将警告用户使用

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

Answer 3

从技术上讲，您无法在某人的浏览器上禁用“后退”按钮，但是，您可以使该按钮不可用或继续加载同一页面。

你可以在这里检查它禁用后退按钮

Answer 4

您可以点击后退按钮重定向同一页面，您的页面将刷新，但每次都会在同一页面上

Answer 5

如果用户坚持点击，我认为“onpopstate”不起作用

只是用

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

或者如果你想警告用户

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

Answer 6

如果您正在使用AngularJS，则以下代码应该可以解决问题。 您必须将此代码添加到app.js文件或文件中，您将注入所有依赖项

 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 7

我有一个不同的场景，我们想要将几页黑名单。 允许大多数SPA使用后退按钮和几页不允许它。 我创建了一个服务来覆盖popstate的function。 然而，我遇到了一个奇怪的问题。

 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; } } } 

然后在AppComponent构造函数中添加LocationStrategyService，它将在start时调用它。

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