web-dev-qa-db-ja.com

1ページアプリケーションのブラウザの戻るボタンを無効にする

シングルページアプリケーションでブラウザの戻るボタンを無効にする必要があります。 onhashchangeやwindow.history.forwardのようなメソッドを使用してみましたが、機能しません（URLがここで変更されないことが原因である可能性があります）ありがとう。

javascriptjquerybuttonbrowserback
7
Developer107

私はAngularJSでシングルページアプリを構築していますが、アプリにはアプリへのすべてのナビゲーション用のボタンとアンカーがあるため、ブラウザーの戻るボタンを無効または禁止したいと考えていました。

私は多くのコードを検索してテストしましたが、これはブラウザの戻るボタンを防ぐのは簡単で、次のコードは私のために働きました。

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

履歴が最初のhistory.back（）を検出したとき

window.onpopstate

が実行され、この瞬間の後、onpopstateイベントの履歴の前後が検出されます。

14
relizondo6

戻るボタンを無効にしても実際にはうまくいくとは思いません。同じ理由はたくさんありますが、 this を見てください。最善の解決策は、使用しているユーザーに警告します

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

技術的には、誰かのブラウザで[戻る]ボタンを無効にすることはできませんが、ボタンを使用できないようにするか、同じページを引き続き読み込むようにすることはできます。

こちらで確認できます 戻るボタンを無効にする

3
Shekhar

戻るボタンをクリックすると同じページをリダイレクトできます。ページは更新されますが、毎回同じページに移動します。

2
Deepesh kumar
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);
});  
}
2
Ellanki samba siva

ユーザーがクリックし続けると、「onpopstate」は機能しないと思います

使用するだけ

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

または、ユーザーに警告したい場合

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

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;
            }
        }
    });
});
1
Viorel Mateianu

いくつかのページをブラックリストに載せたいという別のシナリオがありました。ほとんどの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を追加すると、開始時に呼び出されます。

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


  constructor(        
  private locationStrategyService: LocationStrategyService) {}
}
0
DeadlyChambers