एक पेज एप्लिकेशन के लिए ब्राउज़र बैक बटन अक्षम करें

Question

मुझे अपने एकल पृष्ठ एप्लिकेशन में ब्राउज़र के बैक बटन को अक्षम करने की आवश्यकता है। मैंने ऑनशैशचेंज या window.history.forward जैसी विधियों का उपयोग करने का प्रयास किया लेकिन वे काम नहीं करते हैं (कारण यह हो सकता है कि यूआरएल यहां नहीं बदला जा सकता है) कृपया मदद करें! धन्यवाद।

Answer 1

मैं एक निर्माण AngularJS में काम करते हैं एकल पृष्ठ ऐप और मैं ब्राउज़र के बैक बटन को अक्षम या रोकना चाहता था, क्योंकि मेरे ऐप में मेरे ऐप में सभी नेविगेशन के लिए बटन और एंकर हैं।

मैंने कई कोड खोजे और परीक्षण किए, और ब्राउज़र के बैक बटन को रोकने के लिए यह आसान है और निम्नलिखित कोड मेरे लिए काम करता है।

window.onpopstate = समारोह (ई) { 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

मुझे लगता है कि "onpopstate" काम न करता है, तो उपयोगकर्ता

सिर्फ

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

का उपयोग करें या यदि u उपयोगकर्ता

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

Answer 6

चेतावनी चाहते आप AngularJS का उपयोग कर रहे हैं क्लिक करें जारी रहती है , निम्नलिखित कोड चाल करना चाहिए। आप फ़ाइल या फ़ाइल जहाँ आप अपने सभी निर्भरता

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

इंजेक्षन मैं एक अलग परिदृश्य में जहाँ हम कुछ पन्नों को ब्लैकलिस्ट करना चाहता था था app.js लिए इस कोड को जोड़ने के लिए। अधिकांश एसपीए को बैक बटन और कुछ पेजों का उपयोग करने की इजाजत देने की अनुमति नहीं है। मैंने पॉपस्टेट की कार्यक्षमता को ओवरराइड करने के लिए एक सेवा बनाई है। हालांकि मैं आगे बढ़ने के साथ एक अजीब मुद्दे में भाग गया।

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