जावास्क्रिप्ट का उपयोग करके ब्राउज़र बैक बटन को कैसे रोकें

155

मैं php में एक ऑनलाइन क्विज ऐप कर रहा हूं। मैं उपयोगकर्ता को एक परीक्षा में वापस जाने से प्रतिबंधित करना चाहता हूं। मैंने निम्नलिखित स्क्रिप्ट की कोशिश की है लेकिन यह मेरे टाइमर को रोकता है। मुझे क्या करना चाहिए?

मैंने सोर्स कोड को शामिल किया है। टाइमर को cdtimer.js में संग्रहीत किया जाता है

<script type="text/javascript">
        window.history.forward();
        function noBack()
        {
            window.history.forward();
        }
</script>
<body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">

मेरे पास परीक्षा टाइमर है जो परीक्षा के लिए mysql मान से एक अवधि लेता है । तदनुसार टाइमर शुरू होता है, लेकिन जब मैं बैक बटन को अक्षम करने के लिए कोड डालता हूं तो यह बंद हो जाता है। मेरी समस्या क्या है?

javascript browser

— सावंत अक्षय
स्रोत

नोडजेएस के लिए ब्राउजर के बैक बटन ईवेंट का पता लगाएं और रोकें

— दर्शन दीक्षित

157

बैक बटन को अक्षम करने के कई कारण हैं जो वास्तव में काम नहीं करेंगे। आपका सबसे अच्छा शर्त उपयोगकर्ता को चेतावनी देना है:

window.onbeforeunload = function() { return "Your work will be lost."; };

यह पृष्ठ कई तरीकों की सूची देता है जिन्हें आप बैक बटन को निष्क्रिय करने की कोशिश कर सकते हैं , लेकिन कोई भी गारंटी नहीं है:

http://www.irt.org/script/311.htm

— Coline
स्रोत

यदि जवाब पहले से ही प्रस्तुत किया गया है और यदि आप इसे अस्वीकार करते हैं तो आपको अपने PHP कोड की जांच करनी चाहिए।

— सेला यार

4

यह ध्यान देने योग्य है कि चीजें अब आधुनिक ब्राउज़रों में बदल गई हैं: देखें stackoverflow.com/questions/19926641/…

— devrobf

126

यह आमतौर पर वेब ब्राउजर के डिफ़ॉल्ट व्यवहार को ओवरराइड करने का एक बुरा विचार है। क्लाइंट साइड स्क्रिप्ट में सुरक्षा कारणों से ऐसा करने का पर्याप्त विशेषाधिकार नहीं है।

कुछ ऐसे ही सवाल पूछे गए हैं,

आप वास्तव में ब्राउज़र बैक बटन को अक्षम नहीं कर सकते । हालाँकि आप उपयोगकर्ता को वापस नेविगेट करने से रोकने के लिए अपने तर्क का उपयोग करके जादू कर सकते हैं जो एक ऐसी धारणा बना देगा जैसे यह अक्षम है। यहाँ बताया गया है कि, निम्नलिखित स्निपेट को देखें।

(function (global) { 

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {            
        noBackPlease();

        // disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // stopping event bubbling up the DOM tree..
            e.stopPropagation();
        };          
    }

})(window);

यह शुद्ध जावास्क्रिप्ट में है इसलिए यह अधिकांश ब्राउज़रों में काम करेगा। यह भी अक्षम हैं बैकस्पेस कुंजी लेकिन कुंजी के अंदर सामान्य रूप से काम करेंगे inputखेतों और textarea।

अनुशंसित सेटअप:

इस स्निपेट को एक अलग स्क्रिप्ट में रखें और इसे एक पेज पर शामिल करें जहाँ आप यह व्यवहार चाहते हैं। वर्तमान सेटअप में यह onloadDOM के ईवेंट को निष्पादित करेगा जो इस कोड के लिए आदर्श प्रवेश बिंदु है।

काम कर रहे डेमो!

निम्नलिखित ब्राउज़रों में परीक्षण और सत्यापित,

क्रोम।
फ़ायरफ़ॉक्स।
IE (8-11) और एज।
सफारी।

— Rohit416
स्रोत

1

मुझे समझ नहीं आता कि सेटटाइमआउट क्यों होता है। अगर मैं शुरुआत में # आगे बढ़ूँ! सेट टाइमआउट को हटाने और हटाने के लिए, यह अभी भी काम करता है।

— बारबेर

हाँ सच है, यह काम करेगा, लेकिन अगर मुझे पहली बार में यह था तो मुझे मेमोरी से कुछ याद करना होगा ... प्रवाह क्रोम में अन्य ब्राउज़रों की तरह ठीक से काम नहीं कर रहा था। Chrome ने location.hashशुरुआत में खाली लौटाया इसलिए उसने मुझे इस तरह से करने के लिए बनाया। इस पर और सुधार हो सकता है लेकिन 50 एमएस ने सिर्फ एक बार मुझे इतना खर्च नहीं किया इसलिए मैंने इसे वहां छोड़ दिया।

— रोहित ४१६

ओह, यह एक स्मृति चुनौती थी, धन्यवाद :) मैंने आपके समाधान का उपयोग किया, लेकिन .onhashchangelerler द्वारा सेटइंटरवल को बदल दिया। अच्छी तरह से काम। लेकिन मेरे पास एक और सवाल है: "क्यों (अगर Global.location.hash! = _Hash)"? मुझे लगता है कि यह स्थिति केवल हर समय सही हो सकती है क्योंकि window.location.hash को हमेशा '#' वर्ण के साथ हैश लौटना चाहिए और _sh में कभी भी '#' बैक्टीरिया नहीं होगा। क्या आपको उस पर कुछ याद है? क्या यह केवल उस स्थिति में सुरक्षा है जब ब्राउज़र लोकेशन में '#' चार नहीं लौटाता है।

— बरबेर

मैंने अनुशंसित के रूप में .js फ़ाइल बनाई और निम्नलिखित का उपयोग करके अपने कोड में js फ़ाइल शामिल की: <script src = "./ javascript / noback.js"> </ script> लेकिन मैं अभी भी एक बैक (सफारी का उपयोग करके) कर सकता हूं। मैं क्या खो रहा हूँ? इस लाइब्रेरी को उसी तरह से जोड़ा गया जैसे अन्य लाइब्रेरी मैं इस्तेमाल करता हूं, इसलिए इसमें शामिल अच्छा है।

— टिम

1

आईपैड एयर पर ब्लॉक बैक बटन, ios 8

— प्लगइनकंटेनर

75

मुझे इस पर ध्यान देना चाहिए, एक समाधान की आवश्यकता थी जो विभिन्न प्रकार के ब्राउज़रों पर सही ढंग से और "अच्छी तरह से" काम करे, जिसमें मोबाइल सफारी (पोस्टिंग के समय iOS9) शामिल है। कोई भी समाधान बिलकुल सही नहीं था। मैं निम्नलिखित की पेशकश (IE11 पर परीक्षण, FireFox, क्रोम और सफारी):

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
  history.pushState(null, document.title, location.href);
});

निम्नलिखित पर ध्यान दें:

history.forward()(मेरा पुराना समाधान) मोबाइल सफारी पर काम नहीं करता है --- यह कुछ भी नहीं करने के लिए लगता है (यानी उपयोगकर्ता अभी भी वापस जा सकता है)। history.pushState()उन सभी पर काम करता है।
तीसरा तर्क history.pushState()एक यूआरएल है । ऐसे समाधान जो किसी स्ट्रिंग को पास करते हैं 'no-back-button'या जैसे 'pagename'काम करना ठीक लगता है, जब तक आप पृष्ठ पर एक ताज़ा / पुनः लोड करने का प्रयास नहीं करते हैं, तब उस बिंदु पर "पेज नहीं मिला" त्रुटि उत्पन्न होती है जब ब्राउज़र उस पृष्ठ को अपने यूआरएल के रूप में खोजने की कोशिश करता है। (ब्राउज़र को पेज पर होने पर एड्रेस बार में उस स्ट्रिंग को शामिल करने की भी संभावना है, जो कि उरली है।) location.hrefका उपयोग यूआरएल के लिए किया जाना चाहिए।
दूसरा तर्क history.pushState()एक शीर्षक है । वेब के आस-पास के अधिकांश स्थानों को देखते हुए कहा जाता है कि यह "उपयोग नहीं किया गया" है, और यहाँ सभी समाधान nullउसी के लिए हैं। हालाँकि, मोबाइल सफारी में कम से कम, जो पेज के Url को इतिहास के ड्रॉपडाउन में डालता है, जिसे उपयोगकर्ता एक्सेस कर सकता है। लेकिन जब यह सामान्य रूप से एक पृष्ठ की यात्रा के लिए एक प्रविष्टि जोड़ता है, तो यह अपने शीर्षक में डालता है , जो बेहतर है। तो document.titleउसी व्यवहार के लिए उस परिणाम को पास करना।

— JonBrave
स्रोत

3

यह सही जवाब है। क्रोम, IE 11, फ़ायरफ़ॉक्स और एज पर पूरी तरह से काम करता है।

— Concept211

3

यह स्वीकृत उत्तर होना चाहिए, यह क्रॉस प्लेटफॉर्म है और बस ठीक काम करता है।

— रॉबर्ट

jsp sevlet में सबमिट करने के बाद मैं पेज को रिफ्रेश करता हूं। पृष्ठ प्रदर्शित नहीं (त्रुटि)

— मधुका दिलहान

अब तक का सबसे अच्छा समाधान, लेकिन संभवतः पुराने ब्राउज़रों में काम नहीं कर रहा है

— j4n7

2

आधुनिक ब्राउज़रों के लिए सही समाधान। मैंने @ रोहित 416 उत्तर के साथ मिलकर पुराने ब्राउज़र को सपोर्ट करने के लिए बस कंडिशन टाइपोफ (history.pushState) === "फंक्शन" का उपयोग किया है।

— मिकलोस क्रिवन

74

<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>

— vrfvr
स्रोत

3

प्रतिभाशाली! मैंने इसका उपयोग बैक बटन के आकस्मिक ट्रिगर को रोकने के लिए किया था, जब उपयोगकर्ता एक वेब ऐप में बैकस्पेस (अक्षम / आसानी से फ़ील्ड पर, उदाहरण के लिए) को हिट करता है, जहां वापस / आगे वास्तव में वैसे भी कोई मतलब नहीं था। कन्फर्म किया गया बैकवर्ड और फॉरवर्ड फंक्शनलिटी को निष्क्रिय करता है (थॉट्स बट नॉट्स सूट्स), जिसमें संदर्भ मेनू विकल्प भी शामिल है; IE8, IE11, Chrome & FF के माध्यम से सत्यापित किया गया।

— कुछ नहीं

1

यह काम करता है, लेकिन टेक्स्टबॉक्स में दर्ज सभी डेटा को रीसेट करता है। क्या समाशोधन को रोकना संभव है?

— सोमनीयम

6

इसने मेरे लिए फ़ायरफ़ॉक्स पर काम किया, लेकिन क्रोम पर नहीं (संस्करण 36.0.1985.143)

— '34

यह मेरे लिए भी काम करता है, लेकिन फ़ायरफ़ॉक्स पर यह window.history.back()फ़ंक्शन को तोड़ने के लिए लगता है । हम ब्राउज़र बैक बटन पर क्लिक करने वाले उपयोगकर्ताओं को रोकना चाहते हैं, लेकिन कुछ मामलों में हम पृष्ठ पर अपना स्वयं का बैक बटन प्रदान करते हैं। क्या इसे काम करने का कोई तरीका है?

— AsGoodAsItGates

1

यह मेरे लिए काम नहीं करता है। मैं विंडोज 10 पर क्रोम संस्करण 55 का उपयोग कर रहा हूं। मैंने स्क्रिप्ट को कई स्थानों पर रखा है (हेडर की शुरुआत, शरीर का अंत, आदि) और मैं अब भी पिछले पृष्ठ पर वापस जाने के लिए बैक बटन का उपयोग कर सकता हूं।

— विक्टर स्टोडार्ड

28

यह कोड आधुनिक ब्राउज़रों के लिए बैक बटन को निष्क्रिय कर देगा जो एचटीएमएल 5 इतिहास एपीआई का समर्थन करता है। सामान्य परिस्थितियों में, पिछला बटन पुश करने से पिछले पृष्ठ पर एक कदम पीछे चला जाता है। यदि आप history.pushState () का उपयोग करते हैं, तो आप वर्तमान पृष्ठ पर अतिरिक्त उप-चरण जोड़ना शुरू करते हैं। जिस तरह से यह काम करता है, यदि आप इतिहास का उपयोग कर रहे थे। PushState () तीन बार, तो बैक बटन को पुश करना शुरू करें, पहले तीन बार यह इन उप-चरणों में वापस नेविगेट करेगा, और फिर चौथी बार यह वापस जाएगा। पिछला पृष्ठ।

यदि आप इस व्यवहार को इवेंट श्रोता के साथ जोड़ते हैं popstate, तो आप अनिवार्य रूप से उप-राज्यों का एक अनंत लूप सेट कर सकते हैं। इसलिए, आप पृष्ठ को लोड करते हैं, एक उप-राज्य को धक्का देते हैं, फिर पीछे के बटन को दबाते हैं, जो एक उप-राज्य को पॉप करता है और एक दूसरे को भी धक्का देता है, इसलिए यदि आप पीछे के बटन को फिर से धक्का देते हैं तो यह धक्का देने के लिए उप-राज्यों से बाहर कभी नहीं चलेगा । यदि आपको लगता है कि बैक बटन को निष्क्रिय करना आवश्यक है, तो यह आपको वहां पहुंचा देगा।

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});

— जेरेमी वार्न
स्रोत

2

किसी भी ब्राउज़र पर, इसके बाद किसी पृष्ठ को रीफ़्रेश / रीलोड करें, और आप "पृष्ठ नहीं मिला" त्रुटि पर अटक जाएंगे, क्योंकि यह नाम वाले पृष्ठ को खोजने का प्रयास करता है no-back-button... (ब्राउज़र no-back-buttonपते में भी दिखाने की संभावना है बार भी, जो बदसूरत लगता है।) उचित होने के लिए, यह केवल एकमात्र समाधान नहीं है जो यहां से ग्रस्त है। 3 तर्कhistory.pushState() एक url है , और आपके वर्तमान पृष्ठ का url होना चाहिए: location.hrefइसके बजाय उपयोग करें ।

— जॉनब्रेव

4

इसने मेरे लिए काम किया। बस 'no-back-button' को "window.top.location.pathname + window.top.location.search" में बदलें और यह उस पृष्ठ का नाम रहेगा जिस पर आप ताज़ा हैं, यहां तक कि ताज़ा भी

— स्टीव

दूसरों के बीच, यह मेरे लिए काम करता है, upvote। का संदर्भ लें stackoverflow.com/questions/19926641/... ।

— user2171669

मैंने कई मामलों का पता लगाया है, और यह 1-पृष्ठ साइट के लिए सबसे अच्छा समाधान है

— djdance

यह एक बहुत ही बुरा समाधान है क्योंकि आप URL बदल रहे हैं, इसलिए यदि आप पीछे से टकराते हैं और कुछ समय बाद क्रोम उस पथ पर पुनर्निर्देशित होगा जो मौजूद नहीं है

— Tallboy

21

ब्राउज़र बैक इवेंट को प्रतिबंधित करने के लिए

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};

— फ़ज़ल हलाई
स्रोत

1

क्रोम पर यह बहुत अच्छा काम करता है!, क्यों लोग मतदान नहीं कर रहे हैं क्योंकि यह सबसे अच्छा जवाब है?

— तारिक सेसेरी

1

मैंने अभी इसे निम्न ब्राउज़रों पर विंडोज 10 ओएस (महान काम करता है) क्रोम संस्करण 74.0.3729.108 (आधिकारिक बिल्ड) (64-बिट) क्रोम कैनरी संस्करण 76.0.3780.0 (आधिकारिक बिल्ड) कैनरी (32-बिट) क्रोम संस्करण 66.0 का उपयोग करके परीक्षण किया। 3355.0 (डेवलपर बिल्ड) (64-बिट) फ़ायरफ़ॉक्स 66.0.3 (64-बिट) धार IE 11 सफारी 5.1.7

— तारिक सेइसेरी

2

@ TarıkSeyceri क्योंकि यह केवल उन ब्राउज़रों पर काम करता है जो क) इतिहास एपीआई बी का समर्थन करते हैं) पेज वास्तव में इतिहास एपीआई का उपयोग राज्य का प्रबंधन करने के लिए कर रहा है

— givanse

वर्जन 75 के बाद क्रोम में कोई काम नहीं कर रहा है। देखें: support.google.com/chrome/thread/8721521?hl=hi

— जीन b।

13

    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

— इंग महमूद एल तोरी
स्रोत

12

हालांकि यह एक मान्य उत्तर हो सकता है, आपको यह समझाने की बहुत अधिक संभावना है कि कोड क्या करता है और यह कैसे काम करता है। कोड-केवल उत्तर कम सकारात्मक ध्यान प्राप्त करते हैं और अन्य उत्तरों की तरह उपयोगी नहीं होते हैं।

— औरोरा ०१०१

क्रोम, फ़ायरफ़ॉक्स, IE और एज पर परीक्षण किया गया। यह अच्छा काम करता है। तुमने मुझे बचाया।

— Nooovice Boooy

12

यह वह तरीका है जिससे मैं इसे पूरा कर सकता हूं। अजीब तरह से window.location बदलने से क्रोम और सफारी में ठीक काम नहीं हुआ। होता है कि स्थान.शश क्रोम और सफारी के लिए इतिहास में एक प्रविष्टि नहीं बनाता है। इसलिए आपको पुशस्टेट का उपयोग करना होगा। यह मेरे लिए सभी ब्राउज़रों में काम कर रहा है।

    history.pushState({ page: 1 }, "title 1", "#nbb");
    window.onhashchange = function (event) {
        window.location.hash = "nbb";

    };

— Sanchitos
स्रोत

1

IE9 और नीचे में काम नहीं करता है, pushState समर्थित नहीं है।

— एलेक्स

महान। यह एक अच्छा दृष्टिकोण है और लगभग सभी नवीनतम ब्राउज़रों में काम करता है।

— वेणुगोपाल एम

1

बाद के IE में महान काम करता है। सीधे दस्तावेज़ में रखें। पहले से ही: $(document).ready(function () { .... });

— ओप्पा गिंगम स्टाइल

ध्यान रखें कि आपको "#nbb" से पहले अपना वर्तमान uri जोड़ना होगा। यानी "खाता # nbb"

— म्लादेन जेंज़ेटोविक

9

<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>

— अश्विन पाटिल
स्रोत

क्या इसके लिए कुछ दस्तावेज हैं event.persisted?

— मुहम्मद

1

यहाँ आपके प्रश्न के लिए लिंक पाया गया है। इसे यहाँ खोजें @Mhdhd

— rbashish

मैंने सिर्फ यह कोशिश की, काम नहीं कर रहा

— पेड्रो जोक्विन

8

यह लेख jordanhollinger.com पर का सबसे अच्छा विकल्प है जो मुझे लगता है। रेजर के जवाब के समान लेकिन थोड़ा स्पष्ट। नीचे दिए गए कोड; जॉर्डन हॉलिंगर को पूरा श्रेय:

इससे पहले पेज:

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

पेज ऑफ़ नो रिटर्न जावास्क्रिप्ट:

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}

— dav_i
स्रोत

8

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

यह जावास्क्रिप्ट किसी भी उपयोगकर्ता को वापस जाने की अनुमति नहीं देता है (Chrome, FF, IE, Edge में काम करता है)

— सुरजीत मित्रा
स्रोत

5

इसे आराम से आज़माएं:

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});

— लखन
स्रोत

5

यह कोड नवीनतम क्रोम और फ़ायरफ़ॉक्स ब्राउज़रों के साथ परीक्षण किया गया है।

    <script type="text/javascript">
        history.pushState(null, null, location.href);
        history.back();
        history.forward();
        window.onpopstate = function () { history.go(1); };
    </script>

— फ्रैंकलिन इनोसेंट एफ
स्रोत

स्वागत है हुहुआंग।

— फ्रैंकलिन इनोसेंट एफ

3

पृष्ठ के साथ हस्तक्षेप किए बिना पीछे के तीर को तोड़ने के लिए बहुत ही सरल और साफ फ़ंक्शन।

लाभ:

लोड तुरंत होता है और मूल हैश को पुनर्स्थापित करता है, इसलिए उपयोगकर्ता URL को बदलने से विचलित नहीं होता है।
उपयोगकर्ता अभी भी 10 बार वापस दबाकर बाहर निकल सकता है (यह अच्छी बात है) लेकिन गलती से नहीं
उपयोग करने वाले अन्य समाधानों की तरह कोई उपयोगकर्ता हस्तक्षेप नहीं करता है onbeforeunload
यह केवल एक बार चलता है और आपके द्वारा राज्य को ट्रैक करने के लिए उपयोग किए जाने वाले मामले में आगे हैश जोड़तोड़ के साथ हस्तक्षेप नहीं करता है
मूल हैश पुनर्स्थापित करता है, इसलिए लगभग अदृश्य है।
उपयोग करता है setIntervalइसलिए यह धीमे ब्राउज़रों को नहीं तोड़ता है और हमेशा काम करता है।
शुद्ध जावास्क्रिप्ट, को HTML5 इतिहास की आवश्यकता नहीं है, हर जगह काम करता है।
सरल, सरल, और अन्य कोड के साथ अच्छा खेलता है।
उपयोग नहीं करता है unbeforeunloadमॉडल संवाद के साथ उपयोगकर्ता को बाधित करने वाले का ।
यह सिर्फ उपद्रव के बिना काम करता है।

नोट: कुछ अन्य समाधानों का उपयोग करते हैं onbeforeunload। कृपया इस उद्देश्य के लिए उपयोग न करें onbeforeunload, जो एक संवाद को पॉप अप करता है जब भी उपयोगकर्ता विंडो को बंद करने की कोशिश करता है, बैकर मारा, आदि जैसे मोडलonbeforeunload आमतौर पर केवल दुर्लभ परिस्थितियों में ही उपयुक्त होते हैं, जैसे कि जब वे वास्तव में स्क्रीन और हेवन पर बदलाव करते हैं ' टी ने उन्हें बचाया, इस उद्देश्य के लिए नहीं।

यह काम किस प्रकार करता है

पृष्ठ लोड पर निष्पादन
आपके मूल हैश को बचाता है (यदि कोई URL में है)।
क्रमिक रूप से हैश में # / noop / {1..10} जोड़ता है
मूल हैश पुनर्स्थापित करता है

बस। आगे कोई गड़बड़ नहीं, कोई बैकग्राउंड इवेंट मॉनिटरिंग नहीं, और कुछ नहीं।

इसका उपयोग एक दूसरे में करें

तैनात करने के लिए, बस इसे अपने पृष्ठ पर या अपने JS में कहीं भी जोड़ें:

<script>
/* break back button */                                                                        
window.onload=function(){                                                                      
  var i=0; var previous_hash = window.location.hash;                                           
  var x = setInterval(function(){                                                              
    i++; window.location.hash = "/noop/" + i;                                                  
    if (i==10){clearInterval(x);                                                               
      window.location.hash = previous_hash;}                                                   
  },10);
}
</script>

— घातक गलती
स्रोत

2

ऐसा लगता है कि ब्राउज़र में बैक बटन को अक्षम करने के साथ-साथ बैकस्पेस बटन आपको वापस ले रहा है।

history.pushState(null, null, $(location).attr('href'));
    window.addEventListener('popstate', function () {
        history.pushState(null, null, $(location).attr('href'));
    });

— jgabb
स्रोत

1

   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>

— user3789888
स्रोत

1

आप बस ऐसा नहीं कर सकते और नहीं करना चाहिए। हालाँकि, लेकिन यह मददगार हो सकता है

<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>

मेरे क्रोम और फ़ायरफ़ॉक्स में काम करता है

— शैलेंद्र शर्मा
स्रोत

1

IE में बैकस्पेस बटन को रोकने के लिए इसे आज़माएं जो डिफ़ॉल्ट रूप से "बैक" के रूप में कार्य करता है:

<script language="JavaScript">
$(document).ready(function() {
$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;


    if (event.keyCode === 8 ) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && 
             (
                 d.type.toUpperCase() === 'TEXT' ||
                 d.type.toUpperCase() === 'PASSWORD' || 
                 d.type.toUpperCase() === 'FILE' || 
                 d.type.toUpperCase() === 'EMAIL' || 
                 d.type.toUpperCase() === 'SEARCH' || 
                 d.type.toUpperCase() === 'DATE' )
             ) || 
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        }
        else {

            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }

    try {
        document.addEventListener('keydown', function (e) {
               if ((e.keyCode === 13)){
                  // alert('Enter keydown');
                   e.stopPropagation();
                   e.preventDefault();
               }



           }, true);
        } catch (err) {}
    });
});
</script>

— अजीत कांबले
स्रोत

1

मेरा मानना है कि एकदम सही समाधान वास्तव में बहुत सीधा है, जिसका उपयोग मैंने कई वर्षों से किया है।

यह मूल रूप से चल रहे दस्तावेज़ 'माउसएंटर' / 'मसेलवेव' घटनाओं के साथ-साथ विंडो के "ऑनबेफ्रूनलोड" इवेंट को असाइन कर रहा है, इसलिए अलर्ट केवल तभी ट्रिगर होता है जब क्लिक दस्तावेज़ के दायरे से बाहर होते हैं (जो तब ब्राउज़र के पीछे या आगे बटन हो सकता है)

$(document).on('mouseenter', function(e) { 
        window.onbeforeunload = null; 
    }
);

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);

— अब्देलकोडौस रिफै
स्रोत

1

आधुनिक ब्राउज़र में यह काम करने लगता है:

// https://developer.mozilla.org/en-US/docs/Web/API/History_API
let popHandler = () => {
  if (confirm('Go back?')) {
    window.history.back() 
  } else {
    window.history.forward()
    setTimeout(() => {
      window.addEventListener('popstate', popHandler, {once: true})
    }, 50) // delay needed since the above is an async operation for some reason
  }
}
window.addEventListener('popstate', popHandler, {once: true})
window.history.pushState(null,null,null)

— जोकिम एल। क्रिस्टियनसेन
स्रोत

1

यकीन नहीं हुआ कि क्या हुआ, लेकिन किसी कारण से मैंने इस जवाब को दूसरी मशीन पर लिख दिया। बस आपको यह बताना मेरा उद्देश्य नहीं था, लेकिन मैं अब वोट को पूर्ववत नहीं कर सकता: /

— लेन्र्ड फोंटेइजन

@LennardFonteijn :) पर कोई भावनाएँ आहत नहीं हुईं

— जोकिम एल। क्रिस्टियन

1

Chrome 79 में मेरे लिए सबसे अधिक उत्कीर्ण जवाबों में से किसी ने भी काम नहीं किया । ऐसा लगता है कि संस्करण 75 के बाद Chrome ने बैक बटन के संबंध में अपना व्यवहार बदल दिया है, यहां देखें:

https://support.google.com/chrome/thread/8721521?hl=en

हालाँकि, उस Google थ्रेड में, अजरुल्मुकमिन अज्मी द्वारा बहुत ही अंत में दिए गए उत्तर ने काम किया। यही उसका समाधान है।

<script>

history.pushState(null, document.title, location.href); 
history.back(); 
history.forward(); 
window.onpopstate = function () { 
    history.go(1); 
};

</script>

Chrome के साथ समस्या यह है कि यह onpopstate इवेंट को ट्रिगर नहीं करता है जब तक कि आप ब्राउज़र एक्शन (यानी कॉल हिस्ट्री.बैक) नहीं करते हैं। इसीलिए मैंने उन्हें स्क्रिप्ट में जोड़ा है।

मुझे पूरी तरह से समझ में नहीं आया कि उसने क्या लिखा है, लेकिन जाहिरा तौर पर history.back() / history.forward()वापस क्रोम 75+ में ब्लॉक करने के लिए एक अतिरिक्त की आवश्यकता है।

— जीन बी।
स्रोत

उच्च और निम्न खोज के बाद अंत में एंड्रॉइड ब्राउज़र पर भी काम किया, जहां किसी कारण से ब्राउज़र के बैक बटन इवेंट को किसी अन्य स्क्रिप्ट के साथ पता नहीं चला जिसकी मैंने कोशिश की थी। धन्यवाद, धन्यवाद, धन्यवाद फिर से! Chrome 83 के तहत डेस्कटॉप और मोबाइल दोनों के तहत परीक्षण और काम करना ठीक है! जीन, तुम एक जीवन रक्षक हो!

— इवान

0

मैं एक HTML पेज (index.html) बनाता हूं। मैं भी (स्क्रिप्ट) फ़ोल्डर / निर्देशिका के अंदर एक (मैकेनिज्म) जमा करता हूं। फिर, मैं अपनी सभी सामग्री को (index.html) फॉर्म, टेबल, स्पैन और डिव टैग के रूप में आवश्यकतानुसार उपयोग करता हूं। अब, यहाँ वह तरकीब है जो पीछे कर देगी / आगे कुछ नहीं करेगी!

सबसे पहले, तथ्य यह है कि आपके पास केवल एक पृष्ठ है! दूसरा, नियमित लिंक के माध्यम से जरूरत पड़ने पर उसी पेज पर सामग्री को छिपाने और प्रदर्शित करने के लिए स्पैन / डिव टैग के साथ जावास्क्रिप्ट का उपयोग!

'Index.html' के अंदर:

    <td width="89px" align="right" valign="top" style="letter-spacing:1px;">
     <small>
      <b>
       <a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>&nbsp;
      </b>
     </small>
     [&nbsp;<span id="inCountSPN">0</span>&nbsp;]
    </td>

अंदर 'मैकेनिज्म.जेएस':

    function DisplayInTrafficTable()
    {
     var itmsCNT = 0;
     var dsplyIn = "";
     for ( i=0; i<inTraffic.length; i++ )
     {
      dsplyIn += "<tr><td width='11'></td><td align='right'>" + (++itmsCNT) + "</td><td width='11'></td><td><b>" + inTraffic[i] + "</b></td><td width='11'></td><td>" + entryTimeArray[i] + "</td><td width='11'></td><td>" + entryDateArray[i] + "</td><td width='11'></td></tr>";
     }
     document.getElementById('inOutSPN').innerHTML = "" +
                                             "<table border='0' style='background:#fff;'><tr><th colspan='21' style='background:#feb;padding:11px;'><h3 style='margin-bottom:-1px;'>INCOMING TRAFFIC REPORT</h3>" + DateStamp() + "&nbsp;&nbsp;-&nbsp;&nbsp;<small><a href='#' style='letter-spacing:1px;' onclick='OpenPrintableIn();'>PRINT</a></small></th></tr><tr style='background:#eee;'><td></td><td><b>###</b></td><td></td><td><b>ID #</b></td><td></td><td width='79'><b>TYPE</b></td><td></td><td><b>FIRST</b></td><td></td><td><b>LAST</b></td><td></td><td><b>PLATE #</b></td><td></td><td><b>COMPANY</b></td><td></td><td><b>TIME</b></td><td></td><td><b>DATE</b></td><td></td><td><b>IN / OUT</b></td><td></td></tr>" + dsplyIn.toUpperCase() + "</table>" +
                                             "";
     return document.getElementById('inOutSPN').innerHTML;
    }

यह बालों वाला दिखता है, लेकिन फ़ंक्शन के नाम और कॉल, एम्बेडेड HTML, और स्पैन टैग आईडी कॉल को नोट करता है। यह दिखाना था कि आप एक ही पेज पर अलग-अलग HTML को एक ही स्पैन टैग में कैसे इंजेक्ट कर सकते हैं! बैक / फॉरवर्ड इस डिज़ाइन को कैसे प्रभावित कर सकता है? यह नहीं हो सकता, क्योंकि आप वस्तुओं को छिपा रहे हैं और सभी को एक ही पृष्ठ पर प्रतिस्थापित कर रहे हैं!

कैसे छिपाएं और कैसे प्रदर्शित करें? यहाँ जाता है: अंदर की कार्यप्रणाली 'मैकेनिज्म। जेएस' आवश्यकतानुसार, उपयोग करें:

    document.getElementById('textOverPic').style.display = "none"; //hide
    document.getElementById('textOverPic').style.display = "";     //display

लिंक्स के माध्यम से 'index.html' कॉल फ़ंक्शंस:

    <img src="images/someimage.jpg" alt="" />
    <span class="textOverPic" id="textOverPic"></span>

तथा

    <a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>

मुझे उम्मीद है कि मैंने आपको सिरदर्द नहीं दिया। क्षमा करें अगर मैंने किया :-)

— hacker1033
स्रोत

0

मेरे मामले में यह एक शॉपिंग ऑर्डर था। इसलिए मैंने जो किया वह था बटन को निष्क्रिय करना। जब उपयोगकर्ता ने वापस क्लिक किया, तब भी बटन अक्षम था। जब उन्होंने एक बार फिर क्लिक किया, और फिर आगे जाने के लिए एक पेज बटन पर क्लिक किया। मुझे पता था कि उनका आदेश सबमिट कर दिया गया था और दूसरे पृष्ठ पर छोड़ दिया गया था।

मामले में जब पृष्ठ वास्तव में ताज़ा हो जाता है जो बटन (सैद्धांतिक रूप से) उपलब्ध कराएगा; मैं तब पृष्ठ लोड में प्रतिक्रिया करने में सक्षम था कि आदेश पहले से ही प्रस्तुत किया गया है और फिर पुनर्निर्देशित भी।

— Valamas
स्रोत

0

<script language="JavaScript">
    javascript:window.history.forward(1);
</script>

— कमलेश
स्रोत

3

1. javascript:आपके द्वारा लिखी गई परिभाषित करता है एक जावास्क्रिप्ट लेबल "जावास्क्रिप्ट" नाम दिया है। मुझे बहुत संदेह है कि आपने यह इरादा किया है; मुझे शक है कि आप href=javascript:...जावास्क्रिप्ट <script>ब्लॉक के साथ मिला रहे हैं । 2. HTML5 पर language="JavaScript"एक वैध <script>विशेषता होना बंद कर दिया । 3. ऊपर दिए गए 2 अंक ज्यादा मायने नहीं रखते; क्या बात है कि history.forward(1)मोबाइल सफारी (कम से कम) में काम नहीं करता है। history.pushState()इसके बजाय किसी एक उत्तर का उपयोग करें ।

— जॉनब्रवे

0

आप बस एक छोटी सी स्क्रिप्ट डाल सकते हैं और फिर जांच सकते हैं। यह आपको पिछले पृष्ठ पर जाने की अनुमति नहीं देगा। यह जावास्क्रिप्ट में किया जाता है।

<script type="text/javascript">
    function preventbackbutton() { window.history.forward(); }
    setTimeout("preventbackbutton()", 0);
    window.onunload = function () { null };
</script>

जब आप ब्राउज़र के माध्यम से पिछले या पिछले पृष्ठ पर जाने का प्रयास करते हैं तो window.onunload फ़ंक्शन आग हो जाती है।

उम्मीद है की यह मदद करेगा।

— noobprogrammer
स्रोत

0

मुझे React.JS से यह समस्या थी। (कक्षा घटक)

और आसानी से हल करें

componentDidMount(){
   window.addEventListener("popstate", e=> {
      this.props.history.goForward();
   }
}

HashRouterसे उपयोग किया है react-router-dom।

— ऊ
स्रोत

0

बस सेट करें location.hash="Something", बैक बटन दबाने पर हैश url से हट जाएगी लेकिन पेज वापस नहीं जाएगा, यह विधि गलती से वापस जाने से रोकने के लिए अच्छी है, लेकिन सुरक्षा उद्देश्यों के लिए आपको पुनः उत्तर देने से रोकने के लिए अपने बैकएंड को डिज़ाइन करना चाहिए

— अभिषेक
स्रोत

-1

//"use strict";
function stopBackSpace(e) {
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');

    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    // null
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;
    // when click Backspace,judge the type of obj.

    var flag1 = ((t == 'password' || t == 'text' || t == 'textarea') && ((vReadOnly == true || vReadOnly == 'readonly') || vEnabled != true)) ? true : false;

    var flag2 = (t != 'password' && t != 'text' && t != 'textarea') ? true : false;

    if (flag2) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
    if (flag1) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
}
if (typeof($) == 'function') {
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 8) {
                return stopBackSpace(e);
            }
        });
    });
} else {
    document.onkeydown = stopBackSpace;
}

— Chauncey.Zhong
स्रोत

1 इवेंट ऑब्जेक्ट 2 प्राप्त करें। निर्णय की स्थिति के रूप में ईवेंट स्रोत प्रकार निर्धारित करने के लिए। 3. जब हिट बैकस्पेस, पासवर्ड या एकल के लिए इवेंट स्रोत प्रकार, और सही या सक्षम संपत्ति के लिए आसानी से संपत्ति झूठी है, तो बैकस्पेस कुंजी विफलता है। जब बैकस्पेस मारा जाता है, तो घटना का स्रोत पासवर्ड या सिंगल टाइप करता है, बैकस्पेस की मुख्य विफलता है

— Chauncey.Zhong

यह सवाल बैक नेविगेशन बटन का उपयोग करने के बारे में पूछ रहा है न कि बैकस्पेस कुंजी का।

— क्वेंटिन