Vô hiệu hoá nút quay lại trình duyệt cho một ứng dụng trang

Question

Tôi cần tắt nút quay lại của trình duyệt trong ứng dụng trang đơn của mình. Tôi đã thử sử dụng các phương pháp như onhashchange hoặc window.history.forward nhưng chúng không hoạt động (lý do có thể là url đó không bị thay đổi tại đây) Xin vui lòng trợ giúp! Cảm ơn.

Answer 1

Tôi làm việc trong AngularJS xây dựng một Ứng dụng một trang và tôi muốn vô hiệu hóa hoặc ngăn chặn nút quay lại của trình duyệt, bởi vì ứng dụng của tôi có các nút và neo cho tất cả lưu trữ vào ứng dụng của tôi.

Tôi đã tìm kiếm và kiểm tra nhiều mã, và điều này là dễ dàng để ngăn chặn nút quay lại của trình duyệt và mã sau hoạt động cho tôi.

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

Khi lịch sử phát hiện history.back đầu tiên()

window.onpopstate

được thực thi, sau đó sau thời điểm này bất kỳ trở lại hoặc chuyển tiếp trong lịch sử được phát hiện cho onpopstate biến cố.

Answer 2

Tôi không nghĩ rằng việc tắt nút quay lại sẽ thực sự hoạt động. Vì vậy, nhiều lý do cho cùng nhưng đã nhìn vào this. giải pháp tốt nhất của bạn sẽ cảnh báo người sử dụng sử dụng

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

Answer 3

Bạn về mặt kỹ thuật không thể vô hiệu hóa các nút Back trên trình duyệt của ai đó, tuy nhiên, bạn có thể làm cho nó để nút không có sẵn hoặc tiếp tục tải cùng một trang.

Bạn có thể kiểm tra xem nó ở đây Disabling the Back Button

Answer 4

Bạn có thể chuyển hướng cùng một trang trên bấm vào nút quay lại, trang của bạn sẽ nhận được làm mới nhưng bạn sẽ có trên cùng một trang mỗi lần

Answer 5

tôi nghĩ rằng "onpopstate" không làm việc nếu người dùng kiên trì bấm

chỉ cần sử dụng

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

hoặc nếu u muốn cảnh báo người sử dụng

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

Answer 6

Nếu bạn sử dụng AngularJS , các mã sau đây nên làm các trick. Bạn phải thêm mã này vào tệp hoặc tệp app.js nơi bạn tiêm tất cả các phụ thuộc của mình

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

Tôi có một kịch bản khác mà chúng tôi muốn đưa vào danh sách đen một vài trang. Cho phép hầu hết SPA sử dụng nút quay lại và một vài trang để không cho phép. Tôi đã tạo ra một dịch vụ để ghi đè lên chức năng của popstate. Tuy nhiên, tôi đã gặp phải một vấn đề kỳ lạ khi tiến lên phía trước.

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

Sau đó, trong hàm dựng AppComponent thêm LocationStrategyService và nó sẽ gọi nó khi bắt đầu.

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


    constructor(  
    private locationStrategyService: LocationStrategyService) {} 
}