Question

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

Answer 1

我在AngularJS中构建一个单页应用程序，我想禁用或阻止浏览器的后退按钮，因为我的应用程序有按钮和锚点，可以将所有navegation用于我的应用程序。

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

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

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

时

window.onpopstate

执行

，然后在此时刻之后检测历史记录中的任何后退或前进，以查看onpopstate事件。

Answer 2

我不认为禁用后退按钮真的有效。这么多的原因，但看看this。您的最佳解决方案是使用

警告用户

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

Answer 3

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

您可以在此处查看Disabling the Back Button

Answer 4

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

Answer 5

我认为＆＃34; onpopstate＆＃34;如果用户坚持单击

，则不起作用

只需使用

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的功能。然而，我在前进中遇到了一个奇怪的问题。

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) {}
}

Answer 8

+---+----+-------+  
| Id|Name|Address|  
+---+----+-------+  
|  1 |  AA |    Hyd |  
|  2 |  BB |   Bglr |  
|  3 |  CC |     US |  
|  4 |  DD |    IND |  
|  5 |  EE |    Hyd |  
|  6 |  FF |    Chn |  
+---+----+-------+

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

8 个答案: