"क्या आप वाकई इस पृष्ठ से दूर नेविगेट करना चाहते हैं?" कब हुए बदलाव?

267

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

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

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

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

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

— शिम्मी वेइटहैंडलर
स्रोत

3

अपने उदाहरण कार्य को कार्य को बदलने के लिए: myFunction () {window.onbeforeunload = "message"; } फिर इनपुट बदलें: <input type = 'text' onchange = 'myFunction ();>> </ input>

— कीथ

संबंधित: stackoverflow.com/q/821011/435605

— AlikElzin-kilaka

367

अपडेट (2017)

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

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

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

अपडेट (2013)

मूल उत्तर IE6-8 और FX1-3.5 के लिए उपयुक्त है (जो कि हम 2009 में जब इसे लिखा गया था तब हम लक्ष्य कर रहे थे), लेकिन अब तारीख से बाहर है और अधिकांश वर्तमान ब्राउज़रों में काम नहीं करेगा - मैंने छोड़ दिया है संदर्भ के लिए नीचे।

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

आप window.onbeforeunloadएक फ़ंक्शन संदर्भ पर सेट होते हैं, लेकिन पुराने ब्राउज़र में आपको 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;

मूल उत्तर (2009 में काम किया गया)

चालू करना:

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?";
});

— कीथ
स्रोत

4

यह कुछ इस तरह होगा: $ ('इनपुट: टेक्स्ट')। परिवर्तन (फ़ंक्शन () {window.onbeforeunload = $ ('इनपुट: टेक्स्ट [मूल्य! = ""]) लंबाई> 0? "चेतावनी": null ;});

— कीथ

1

एक साधारण जांच के लिए, या आप प्रत्येक बदलाव पर अधिक जटिल सत्यापन जोड़ सकते हैं

— कीथ

1

यह ध्यान देने योग्य है कि 'रिटर्नवैल्यू' विधि मानक में निर्दिष्ट एकमात्र तरीका है, इसलिए यह केवल IE6-8 के लिए नहीं है, यह सभी मानकों के अनुरूप ब्राउज़रों के लिए है (इस मामले में क्रोम, सफारी और ओपेरा शामिल नहीं है)।

— rmcclellan

3

फ़ॉर्म सबमिशन पर अलर्ट रोकने के लिए, मैंने उपयोग किया $("#submit_button").click(function() { window.onbeforeunload = null; });। मैंने मूल रूप से बटन के ऑनक्लिक इवेंट का उपयोग किया था, लेकिन साथ ही साथ यह उतना अच्छा नहीं था, यह IE8 के साथ भी काम नहीं करता था।

— एंडी बेवरली

1

@ AlikElzin-kilaka आप नहीं कर सकते। यदि आप पॉप-अप पाठ को बदलना चाहते हैं तो आपको अपना कस्टम पॉपअप बनाने की आवश्यकता है, लेकिन यह window.onbeforeunloadघटना को रोक नहीं सकता है ।

— कीथ

38

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

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

उदाहरण: नेविगेशन प्रॉम्प्ट को सक्षम / अक्षम करने के लिए निम्नलिखित दो कार्यों को परिभाषित करें (cf. MDN उदाहरण):

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>

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

— सोरेन लोर्बोर्ग
स्रोत

1

मोज़िल की साइट के आधार पर, हाल के डेस्कटॉप ब्राउज़र अब इसका समर्थन करते हैं: developer.mozilla.org/en/DOM/window.onbeforeunload

— Hengjie

Microsoft-ism एक महान शब्द है।

— ल्यूक टेलर

20

क्रोम और सफारी में यह काम करने के लिए, आपको इसे इस तरह करना होगा

window.onbeforeunload = function(e) {
    return "Sure you want to leave?";
};

संदर्भ: https://developer.mozilla.org/en/DOM/window.onbeforeunload

— sshow
स्रोत

18

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

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

— सैम केसर
स्रोत

2

@Jonstjohn के ब्लॉग पोस्ट को हिट करने के लिए प्रतीत नहीं हो सकता। शायद वह एक पाल होगा और हमें सही दिशा में इंगित करेगा? : D

— FLGMwt

14

=> 500 आंतरिक त्रुटि। यही कारण है कि एसओ पर लिंक हटाए गए हैं। नीचे तक तय किया गया।

— Loïc

यह वेबपेज उपलब्ध नहीं है

— Mateusz

2

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं।

— पश्चिमोत्तर

2

जॉन सेंट जॉन से मूल लिंक टूट गया था, तो मैं यह करने के लिए अद्यतन वेबैक मशीन यह संस्करण। लिंक की सामग्री को कई अन्य साइटों में कॉपी किया जा सकता है, लेकिन मुझे लगता है कि सैम को जोड़ा गया "संरक्षित" करना बेहतर था

— अल्वारो मोंटोरो

14

jquerys 'पहले से लोड' ने मेरे लिए बहुत अच्छा काम किया

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

— डेवन पेटिकोलस
स्रोत

बिंद को पदावनत कर दिया गया है और इसके समान कोड का एक नया संस्करण इस उत्तर में देखा जा सकता है: stackoverflow.com/a/1889450/908677

— एलिजा लोफग्रेन

12

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

— lawphotog
स्रोत

11

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

$(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;
    });
})

— कार्ल जी
स्रोत

8

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

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

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

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होगा 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");
    // ...
}

— माइक
स्रोत

3

यहाँ यह कोशिश करो कि यह 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>

— Braydon
स्रोत

3

मानक राज्यों है कि उत्साह रद्द करके नियंत्रित किया जा सकता beforeunload घटना या एक के लिए वापसी मान सेट गैर शून्य मान । इसमें यह भी कहा गया है कि लेखकों को रिटर्नवैल्यू के बजाय Event.preventDefault () का उपयोग करना चाहिए, और उपयोगकर्ता को दिखाया गया संदेश अनुकूलन योग्य नहीं है ।

69.0.3497.92 के अनुसार, क्रोम मानक के अनुरूप नहीं है। हालांकि, एक बग रिपोर्ट दर्ज की गई है, और एक समीक्षा जारी है। Chrome को इवेंट ऑब्जेक्ट के संदर्भ में सेट किए जाने वाले रिटर्नवैल्यू की आवश्यकता होती है, न कि हैंडलर द्वारा लौटाए गए मूल्य की।

यह ट्रैक करने के लिए लेखक की जिम्मेदारी है कि क्या बदलाव किए गए हैं; यह एक चर के साथ किया जा सकता है या यह सुनिश्चित करने पर कि केवल आवश्यक होने पर ही घटना को नियंत्रित किया जा सकता है।

window.addEventListener('beforeunload', function (e) {
    // Cancel the event as stated by the standard.
    e.preventDefault();
    // Chrome requires returnValue to be set.
    e.returnValue = '';
});
    
window.location = 'about:blank';

स्निपेट का विस्तार करें

— ट्रेवर कर्जनिस
स्रोत

2

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

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

— कीर्तन
स्रोत

1

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

— मकरम सालेह
स्रोत

1

आप ऐसा नहीं कर सकते - alertऔर मेरे पीसी पर क्रोम के संस्करण के confirmदौरान ( window.onbeforeunloadऔर window.onunloadबहुत कम से कम अवरुद्ध हैं , लेकिन संभवतः उन हैंडलर का समर्थन करने वाले हर ब्राउज़र में भी)।

— मार्क अमेरी जूल

1

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

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

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

<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?";   
    };
});

— सागर गाला
स्रोत

2

एमडीएन के पहले से लोड किए गए दस्तावेज़ों में "कुछ कारणों से, वेबकिट-आधारित ब्राउज़र संवाद बॉक्स के लिए कल्पना का पालन नहीं करते हैं " भी देखें ।

— अर्जन

1

यहाँ मेरा html है

<!DOCTYPE HMTL>
<meta charset="UTF-8">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="script.js"></script>
</head>

 <body onload="myFunction()">
    <h1 id="belong">
        Welcome To My Home
    </h1>
    <p>
        <a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a>
    </p>
</body>

और इसलिए मैंने javaScript में ऐसा ही कुछ किया है

var myGlobalNameHolder ="";

function myFunction(){
var myString = prompt("Enter a name", "Name Goes Here");
    myGlobalNameHolder = myString;
    if (myString != null) {
        document.getElementById("replaceME").innerHTML =
        "Hello " + myString + ". Welcome to my site";

        document.getElementById("belong").innerHTML =
        "A place you belong";
    }   
}

// create a function to pass our event too
function myFunction2(event) {   
// variable to make our event short and sweet
var x=window.onbeforeunload;
// logic to make the confirm and alert boxes
if (confirm("Are you sure you want to leave my page?") == true) {
    x = alert("Thank you " + myGlobalNameHolder + " for visiting!");
}
}

— जस्टिन स्टोन
स्रोत

0

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

— simplyharsh
स्रोत

0

आप जावास्क्रिप्ट का उपयोग करना चाहते हैं।

यहाँ एक उदाहरण है: http://www.w3schools.com/jsref/event_onunload.asp

— waqasahmed
स्रोत

-1

शरीर टैग के लिए एक "onunload" पैरामीटर है जिसे आप वहां से जावास्क्रिप्ट फ़ंक्शंस कह सकते हैं। यदि यह गलत है तो यह दूर नेविगेट करने से रोकता है।

— stribika
स्रोत

13

सौभाग्य से, यह वास्तव में काम नहीं करता है। अन्यथा मुझे एक पृष्ठ पर जाने से घृणा होगी <body onunload="return false;">।

— सोरेन लोर्बोर्ग