जावास्क्रिप्ट का उपयोग करके किसी वेबपृष्ठ को नेविगेट करने से रोकें


129

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


क्या यह पृष्ठ दूर नेविगेट करता है?
नियाज़

9
सवाल के अनुसार, जावास्क्रिप्ट इसे नेविगेट करता है ...
शोग


@ शोग 9 यह टैब को बंद कर सकता है जिससे यह दूर हो जाता है। मेरी तर्जनी ने थामा ...
बॉब स्टीन

जवाबों:


159

उपयोग onunloadकरने से आप संदेश प्रदर्शित कर सकते हैं, लेकिन नेविगेशन को बाधित नहीं करेंगे (क्योंकि यह बहुत देर हो चुकी है)। हालाँकि, onbeforeunloadनेविगेशन में रुकावट आएगी:

window.onbeforeunload = function() {
  return "";
}

नोट: एक खाली स्ट्रिंग लौटा दी गई है क्योंकि नए ब्राउज़र एक संदेश प्रदान करते हैं जैसे "कोई भी सहेजे नहीं गए परिवर्तन खो जाएंगे" जिन्हें ओवरराइड नहीं किया जा सकता है।

पुराने ब्राउज़रों में आप संदेश को प्रांप्ट में प्रदर्शित करने के लिए निर्दिष्ट कर सकते हैं:

window.onbeforeunload = function() {
  return "Are you sure you want to navigate away?";
}

11
ब्राउज़र एक उपयुक्त संकेत प्रदर्शित करेगा। सीधे शब्दों में कहेंwindow.onbeforeunload = function() { return ""; }
KIM Taegyoon

लेकिन इतना ही काफी नहीं है। फॉर्म के अंदर नियंत्रण के बारे में क्या? उन्होंने यह भी ट्रिगर।
Fandango68

1
आधुनिक ब्राउज़र आपको प्रॉम्प्ट में एक कस्टम संदेश प्रदर्शित करने की अनुमति नहीं देते हैं, क्योंकि फिशर्स और इस तरह से इसका दुरुपयोग किया गया था।
17

धन्यवाद @ फ़ीलम, मैंने उत्तर अपडेट कर दिया है ताकि यह वर्तमान ब्राउज़रों के लिए सटीक हो।
जिम्मी आर। Houts

@FlimmI उपयोगकर्ता ऑनलाइन स्थिति को अपडेट करना चाहते हैं जब ऑनलाइन उपयोगकर्ता ब्राउज़र टैब या ब्राउज़र बंद करते हैं। मैंने समाधान में कोड का उपयोग किया लेकिन यह काम नहीं किया। क्या इसके लिए कोई समाधान है?
नसीम्बा

23

यहां प्रस्तुत अन्य विधियों के विपरीत, इस बिट कोड के कारण ब्राउज़र को चेतावनी प्रदर्शित करने का कारण नहीं होगा जो उपयोगकर्ता से पूछ सकता है कि क्या वह छोड़ना चाहता है; इसके बजाय, यह ब्राउज़र के वर्तमान पृष्ठ पर वापस रीडायरेक्ट (और इस प्रकार नेविगेशन रद्द) करने से पहले ब्राउज़र की स्मृति को अनलोड करने का मौका होता है।

चूंकि यह सीधे लघु-संचलन नेविगेशन द्वारा काम करता है, इसलिए इसका उपयोग पृष्ठ को बंद होने से रोकने के लिए नहीं किया जा सकता है; हालाँकि, इसका उपयोग फ़्रेम-बस्टिंग को अक्षम करने के लिए किया जा सकता है।

(function () {
    var location = window.document.location;

    var preventNavigation = function () {
        var originalHashValue = location.hash;

        window.setTimeout(function () {
            location.hash = 'preventNavigation' + ~~ (9999 * Math.random());
            location.hash = originalHashValue;
        }, 0);
    };

    window.addEventListener('beforeunload', preventNavigation, false);
    window.addEventListener('unload', preventNavigation, false);
})();

डिस्क्लेमर: आपको ऐसा कभी नहीं करना चाहिए। यदि किसी पृष्ठ पर फ्रेम-बस्टिंग कोड है, तो कृपया लेखक की इच्छाओं का सम्मान करें।


अगर उपयोगकर्ता ब्राउज़र (क्लोज़ पर क्लिक करें) बंद करना चाहते हैं तो मोडल कैसे दिखाएं? यह वाकई में?

15

मैं इस थोड़े अलग संस्करण के साथ समाप्त हुआ:

var dirty = false;
window.onbeforeunload = function() {
    return dirty ? "If you leave this page you will lose your unsaved changes." : null;
}

कहीं और मैं गंदे झंडे को सच कर देता हूं, जब फॉर्म गंदगी हो जाता है (या मैं अन्यथा नेविगेट करने से रोकना चाहता हूं)। यह मुझे आसानी से नियंत्रित करने की अनुमति देता है या नहीं, उपयोगकर्ता को पुष्टिकरण नेविगेशन संकेत मिलता है।

चयनित उत्तर में पाठ के साथ आप अनावश्यक संकेत देखते हैं:

यहाँ छवि विवरण दर्ज करें


3
IE में यदि गंदा गलत है, तो एक स्ट्रिंग 'अशक्त' दिखाई जाएगी। बस एक बयान के अंदर इसे लपेटो। देखें: stackoverflow.com/questions/11793996/…
जैकब वैन लिंगन

@JacobvanLingen सहमत, यह सबसे अच्छा जवाब होगा यहाँ और तीन अन्य सवालों पर अगर यह undefinedशून्य के बजाय समाप्त हो गया । (1) यह सशर्त है (2) यह "गंदे" का उल्लेख करता है दूर नेविगेट करने में बाधा के लिए सबसे आम कानूनी कारण है और (3) इसमें एक स्क्रीनशॉट है।
बॉब स्टीन

क्या यह सभी ब्राउज़रों पर काम करेगा अगर यह शून्य के बजाय अपरिभाषित के साथ समाप्त हो गया?
डेंजर

9

अधिक आधुनिक और ब्राउज़र संगत तरीके से समतुल्य, आधुनिक addEventListener API का उपयोग करते हुए।

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

स्रोत: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload


1
सही ढंग से कैपिटल करने के लिए याद रखेंevent.returnValue
फ्लिम्म

7

आयमान के उदाहरण में असत्य को वापस करके आप ब्राउज़र विंडो / टैब को बंद होने से रोकते हैं।

window.onunload = function () {
  alert('You are trying to leave.');
  return false;
}

2
जब तक कि ब्राउज़र ओपेरा नहीं होता है, जो टैब / विंडो / प्रोग्राम को बंद किया जा रहा है, तो ऑनऑनलोड घटना को छोड़ देता है।
पॉवरलॉर्ड

5

JQuery 1.11 में स्वीकृत उत्तर के बराबर:

$(window).on("beforeunload", function () {
    return "Please don't leave me!";
});

JSFiddle उदाहरण

altCognito के उत्तर ने unloadईवेंट का उपयोग किया , जो कि जावास्क्रिप्ट को नेविगेशन को समाप्त करने के लिए बहुत देर से होता है।


3

ऑनलोड का उपयोग करें ।

JQuery के लिए, मुझे लगता है कि यह इस तरह काम करता है:

$(window).unload(function() { 
  alert("Unloading"); 
  return falseIfYouWantToButBeCareful();
});

गलत तरीके से वापस लौटने पर दुर्भाग्य से रद्द नहीं किया जाएगा - unloadजब उपयोगकर्ता पृष्ठ छोड़ रहा होता है तो घटना आग हो जाती है, beforeunloadजिसके विपरीत पहले से ही आग लग जाती है (और रद्द हो सकती है)
जिम्बो

@altCognito: आपने मुझे असत्य के साथ अच्छा विचार दिया है। आप WantToButBeCareful () अब मैं IE या FF द्वारा दिए गए डिफ़ॉल्ट पॉप से ​​बच सकते हैं। लेकिन क्रोम के लिए यह काम नहीं कर रहा है। में देख रहा हूँ।
user367134

3

सुझाए गए त्रुटि संदेश ब्राउज़र द्वारा पहले से प्रदर्शित त्रुटि संदेश की नकल कर सकता है। क्रोम में, समान विंडो में एक के बाद एक 2 समान त्रुटि संदेश प्रदर्शित होते हैं।

क्रोम में, कस्टम संदेश के बाद प्रदर्शित पाठ है: "क्या आप वाकई इस पृष्ठ को छोड़ना चाहते हैं?"। फ़ायरफ़ॉक्स में, यह हमारे कस्टम त्रुटि संदेश को प्रदर्शित नहीं करता है (लेकिन फिर भी संवाद प्रदर्शित करता है)।

अधिक उपयुक्त त्रुटि संदेश हो सकता है:

window.onbeforeunload = function() {
    return "If you leave this page, you will lose any unsaved changes.";
}

या स्टैकओवरफ़्लो शैली: "आपने एक पोस्ट लिखना या संपादित करना शुरू कर दिया है।"


2

यदि आप किसी ब्राउज़र को आगे / पीछे बटन पकड़ रहे हैं और दूर नहीं जाना चाहते हैं, तो आप इसका उपयोग कर सकते हैं:

window.addEventListener('popstate', function() {
    if (window.location.origin !== 'http://example.com') {
        // Do something if not your domain
    } else if (window.location.href === 'http://example.com/sign-in/step-1') {
        window.history.go(2); // Skip the already-signed-in pages if the forward button was clicked
    } else if (window.location.href === 'http://example.com/sign-in/step-2') {
        window.history.go(-2); // Skip the already-signed-in pages if the back button was clicked
    } else {
        // Let it do its thing
    }
});

अन्यथा, आप पहले से लोड किए गए ईवेंट का उपयोग कर सकते हैं , लेकिन संदेश क्रॉस-ब्राउज़र पर काम नहीं कर सकता है, और उसे कुछ वापस करने की आवश्यकता होती है जो एक अंतर्निहित प्रॉम्प्ट को मजबूर करता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.