javascript - परिवर्तनों के दौरान "क्या आप वाकई इस पृष्ठ से दूर नेविगेट करना चाहते हैं?" कैसे दिखाएं?




html message (11)

अपडेट (2017)

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

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};
// Remove navigation prompt
window.onbeforeunload = null;

विरासत ब्राउज़र समर्थन के लिए नीचे पढ़ें।

अपडेट (2013)

मूल उत्तर आईई 6-8 और एफएक्स 1-3.5 के लिए उपयुक्त है (जिसे हम लिखा गया था, जिसे हम 200 9 में वापस लक्षित कर रहे थे), लेकिन अब यह पुराना है और अधिकांश मौजूदा ब्राउज़रों में काम नहीं करेगा - मैंने छोड़ा है संदर्भ के लिए यह नीचे।

window.onbeforeunload सभी ब्राउज़रों द्वारा लगातार इलाज नहीं किया जाता है। यह एक फंक्शन संदर्भ होना चाहिए, न कि एक स्ट्रिंग (मूल उत्तर के रूप में कहा गया है) लेकिन यह पुराने ब्राउज़र में काम करेगा क्योंकि उनमें से ज्यादातर के लिए जांच यह प्रतीत होती है कि कुछ भी onbeforeunload (किसी फ़ंक्शन जो null लौटाता है) को सौंपा गया है।

आप window.onbeforeunload को फ़ंक्शन संदर्भ में सेट करते हैं, लेकिन पुराने ब्राउज़र में आपको केवल एक स्ट्रिंग लौटने की बजाय ईवेंट का returnValue सेट करना returnValue :

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

यदि आप उपयोगकर्ता को संदेश के बिना जारी रखना चाहते हैं तो आप उस confirmOnPageExit को प्राप्त नहीं कर सकते हैं। आपको अभी भी इसे चालू और बंद करने के लिए ईवेंट को हटाने की आवश्यकता है:

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

मूल उत्तर (200 9 में काम किया)

चालू करना:

window.onbeforeunload = "Are you sure you want to leave?";

इसे बंद करने के लिए:

window.onbeforeunload = null;

ध्यान रखें कि यह एक सामान्य घटना नहीं है - आप इसे मानक तरीके से बांध नहीं सकते हैं।

मूल्यों की जांच करने के लिए? यह आपके सत्यापन ढांचे पर निर्भर करता है।

JQuery में यह कुछ ऐसा हो सकता है (बहुत मूल उदाहरण):

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

यहां स्टैक ओवरफ्लो में, यदि आपने परिवर्तन करना शुरू किया है तो आप पृष्ठ से दूर नेविगेट करने का प्रयास करते हैं, जावास्क्रिप्ट पुष्टिकरण बटन दिखाता है और पूछता है: "क्या आप वाकई इस पृष्ठ से दूर नेविगेट करना चाहते हैं?" ब्ली ब्ला ब्लू ...

क्या किसी ने इसे पहले लागू किया है, मैं कैसे ट्रैक करूं कि परिवर्तन किए गए थे? मुझे विश्वास है कि मैं इसे स्वयं कर सकता हूं, मैं विशेषज्ञों से आपके अच्छे अभ्यास सीखने की कोशिश कर रहा हूं।

मैंने निम्नलिखित की कोशिश की लेकिन अभी भी काम नहीं करता है:

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

क्या कोई उदाहरण पोस्ट कर सकता है?


jquerys 'preunload' मेरे लिए बहुत अच्छा काम किया

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});

आप टेक्स्टरेरा (या किसी अन्य फ़ील्ड) पर एक onchange इवेंट जोड़ सकते हैं जो जेएस में एक चर सेट करता है। जब उपयोगकर्ता पृष्ठ को बंद करने का प्रयास करता है (window.onunload) आप उस चर के मान की जांच करते हैं और तदनुसार अलर्ट दिखाते हैं।


इस धागे के सभी उत्तरों के आधार पर, मैंने निम्नलिखित कोड लिखा और यह मेरे लिए काम किया।

यदि आपके पास केवल कुछ इनपुट / टेक्स्टरेरा टैग हैं जिनके लिए ऑनऑनलोड ईवेंट की जांच की आवश्यकता है, तो आप data-onunload="true" रूप में HTML5 डेटा-एट्रिब्यूट असाइन कर सकते हैं

उदाहरण के लिए।

<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>

और जावास्क्रिप्ट (jQuery) इस तरह दिख सकता है:

$(document).ready(function(){
    window.onbeforeunload = function(e) {
        var returnFlag = false;
        $('textarea, input').each(function(){
            if($(this).attr('data-onunload') == 'true' && $(this).val() != '')
                returnFlag = true;
        });

        if(returnFlag)
            return "Sure you want to leave?";   
    };
});

जब उपयोगकर्ता फॉर्म में परिवर्तन करना शुरू करता है, तो एक बूलियन ध्वज सेट किया जाएगा। यदि उपयोगकर्ता पृष्ठ से दूर नेविगेट करने का प्रयास करता है, तो आप window.onunload में उस ध्वज को चेक करें window.onunload ईवेंट। अगर ध्वज सेट किया गया है, तो आप इसे एक स्ट्रिंग के रूप में लौटकर संदेश दिखाते हैं। एक स्ट्रिंग के रूप में संदेश लौटने से आपका संदेश युक्त एक पुष्टिकरण संवाद पॉपअप होगा।

यदि आप परिवर्तन करने के लिए AJAX का उपयोग कर रहे हैं, तो परिवर्तन किए जाने के बाद आप ध्वज को false पर सेट कर सकते हैं (यानी AJAX सफलता ईवेंट में)।


नए लोगों के लिए जो एक साधारण समाधान की तलाश में हैं, बस Areyousure.js


माइक्रोसॉफ्ट-आईएसएम पर आधारित सबसे नज़दीकी चीज है जो हमारे पास एक मानक समाधान है, लेकिन ध्यान रखें कि ब्राउज़र का समर्थन असमान है; उदाहरण के लिए ओपेरा के लिए यह केवल संस्करण 12 और बाद में काम करता है (अभी भी इस लेखन के रूप में बीटा में)।

साथ ही, अधिकतम संगतता के लिए , आपको मोज़िला डेवलपर नेटवर्क पर समझाए गए अनुसार, केवल एक स्ट्रिंग को वापस करने की आवश्यकता है।

उदाहरण: नेविगेशन प्रॉम्प्ट को सक्षम / अक्षम करने के लिए निम्न दो फ़ंक्शंस को परिभाषित करें (सीएफ। एमडीएन उदाहरण):

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

फिर इस तरह के एक फॉर्म को परिभाषित करें:

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

इस तरह, उपयोगकर्ता को केवल उस क्षेत्र को स्थानांतरित करने के बारे में चेतावनी दी जाएगी यदि उसने टेक्स्ट क्षेत्र बदल दिया है, और जब वह वास्तव में फ़ॉर्म सबमिट कर रहा है तो उसे संकेत नहीं दिया जाएगा।


यदि कोई डेटा फॉर्म में इनपुट है, तो संदेश प्रस्तुत करने का यह एक आसान तरीका है, और फॉर्म सबमिट होने पर संदेश न दिखाने के लिए:

$(function () {
    $("input, textarea, select").on("input change", function() {
        window.onbeforeunload = window.onbeforeunload || function (e) {
            return "You have unsaved changes.  Do you want to leave this page and lose your changes?";
        };
    });
    $("form").on("submit", function() {
        window.onbeforeunload = null;
    });
})

यहां आज़माएं यह 100% काम करता है

<html>
<body>
<script>
var warning = true;
window.onbeforeunload = function() {  
  if (warning) {  
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";  
    }  
}

$('form').submit(function() {
   window.onbeforeunload = null;
});
</script>
</body>
</html>

JQuery के साथ यह सामान करना बहुत आसान है। चूंकि आप सेट करने के लिए बाध्य कर सकते हैं।

यह पहले से लोड करने के लिए पर्याप्त नहीं है, अगर आप सामान संपादित करना शुरू करते हैं तो आप केवल नेविगेट को ट्रिगर करना चाहते हैं।


कीथ के पहले से ही अद्भुत उत्तर पर विस्तार करने के लिए:

कस्टम चेतावनी संदेश

कस्टम चेतावनी संदेशों को अनुमति देने के लिए, आप इसे इस तरह के फ़ंक्शन में लपेट सकते हैं:

function preventNavigation(message) {
    var confirmOnPageExit = function (e) {
        // If we haven't been passed the event get the window.event
        e = e || window.event;

        // For IE6-8 and Firefox prior to version 4
        if (e)
        {
            e.returnValue = message;
        }

        // For Chrome, Safari, IE8+ and Opera 12+
        return message;
    };
    window.onbeforeunload = confirmOnPageExit;
}

फिर बस उस समारोह को अपने कस्टम संदेश से कॉल करें:

preventNavigation("Baby, please don't go!!!");

नेविगेशन को फिर से सक्षम करना

नेविगेशन को पुनः सक्षम करने के लिए, आपको बस इतना करना है कि window.onbeforeunload सेट करें। window.onbeforeunload को null । यहां यह एक साफ छोटे फ़ंक्शन में लपेटा गया है जिसे कहीं भी कहा जा सकता है:

function enableNavigation() {
    window.onbeforeunload = null;
}

तत्वों को बनाने के लिए इसे बांधने के लिए jQuery का उपयोग करना

यदि jQuery का उपयोग करते हैं, तो यह आसानी से इस तरह के सभी तत्वों के लिए बाध्य हो सकता है:

$("#yourForm :input").change(function() {
    preventNavigation("You have not saved the form. Any \
        changes will be lost if you leave this page.");
});

फिर फॉर्म जमा करने की अनुमति देने के लिए:

$("#yourForm").on("submit", function(event) {
    enableNavigation();
});

गतिशील रूप से संशोधित रूपों:

preventNavigation() और enableNavigation() को आवश्यकतानुसार किसी भी अन्य कार्यों से बाध्य किया जा सकता है, जैसे किसी रूप में गतिशील रूप से संशोधित करना, या AJAX अनुरोध भेजने वाले बटन पर क्लिक करना। मैंने फ़ॉर्म में एक छुपा इनपुट तत्व जोड़कर ऐसा किया:

<input id="dummy_input" type="hidden" />

फिर भी जब भी मैं उपयोगकर्ता को नेविगेट करने से रोकना चाहता हूं, तो मैं यह सुनिश्चित करने के लिए उस इनपुट पर परिवर्तन को ट्रिगर करता हूं कि preventNavigation() को निष्पादित किया जाता है:

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

    // ...
    $("#dummy_input").trigger("change");
    // ...
}




confirm