So zeigen Sie die Meldung “Möchten Sie diese Seite wirklich verlassen?” wann Änderungen übernommen?

Question 1

Wenn Sie hier im Stapelüberlauf begonnen haben, Änderungen vorzunehmen, und dann versuchen, von der Seite wegzunavigieren, wird eine Javascript-Bestätigungsschaltfläche angezeigt und fragt: “Sind Sie sicher, dass Sie von dieser Seite wegnavigieren möchten?” bla bla bla…

Hat jemand dies schon einmal implementiert, wie kann ich nachverfolgen, dass Änderungen festgeschrieben wurden? Ich glaube, ich könnte das selbst tun, ich versuche, die guten Praktiken von Ihnen, den Experten, zu lernen.

Ich habe folgendes versucht, aber es funktioniert immer noch nicht:

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

Kann jemand ein Beispiel posten?

Question 2

Aktualisierung (2017)

Moderne Browser betrachten die Anzeige einer benutzerdefinierten Nachricht jetzt als Sicherheitsrisiko, und das war es auch ENTFERNT von allen. Browser zeigen jetzt nur allgemeine Meldungen an. Da wir uns nicht mehr um das Einstellen der Nachricht kümmern müssen, ist es so einfach wie:

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

Lesen Sie unten für die Unterstützung älterer Browser.

Aktualisierung (2013)

Die ursprüngliche Antwort ist für IE6-8 und FX1-3.5 geeignet (was wir 2009 als Ziel hatten, als sie geschrieben wurde), ist aber jetzt ziemlich veraltet und funktioniert nicht in den meisten aktuellen Browsern – ich habe sie verlassen es unten als Referenz.

Die window.onbeforeunload wird nicht von allen Browsern einheitlich behandelt. Es sollte eine Funktionsreferenz und keine Zeichenfolge sein (wie in der ursprünglichen Antwort angegeben), aber das funktioniert in älteren Browsern, da die Überprüfung für die meisten von ihnen zu sein scheint, ob etwas zugewiesen ist onbeforeunload (einschließlich einer Funktion, die zurückkehrt null).

Sie setzen window.onbeforeunload auf einen Funktionsverweis, aber in älteren Browsern muss man das setzen returnValue des Ereignisses, anstatt nur eine Zeichenfolge zurückzugeben:

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

Das kannst du nicht haben confirmOnPageExit Führen Sie die Überprüfung durch und geben Sie null zurück, wenn Sie möchten, dass der Benutzer ohne die Nachricht fortfährt. Sie müssen das Ereignis noch entfernen, um es zuverlässig ein- und auszuschalten:

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

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

Ursprüngliche Antwort (arbeitete 2009)

Einschalten:

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

Um es auszuschalten:

window.onbeforeunload = null;

Denken Sie daran, dass dies kein normales Ereignis ist – Sie können sich nicht auf die übliche Weise daran binden.

Um nach Werten zu suchen? Das hängt von Ihrem Validierungsframework ab.

In jQuery könnte dies so aussehen (sehr einfaches Beispiel):

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

Question 3

Die onbeforeunload Microsoft-ism kommt einer Standardlösung am nächsten, aber seien Sie sich bewusst, dass die Browserunterstützung uneinheitlich ist; zB für Opera funktioniert es nur in Version 12 und höher (zum jetzigen Zeitpunkt noch in der Beta-Phase).

Auch für maximale Kompatibilitätmüssen Sie mehr tun, als nur eine Zeichenfolge zurückzugeben, wie auf der erklärt Mozilla-Entwicklernetzwerk.

Beispiel: Definieren Sie die folgenden beiden Funktionen zum Aktivieren/Deaktivieren der Navigationsaufforderung (vgl. MDN-Beispiel):

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

Dann definieren Sie ein Formular wie folgt:

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

Auf diese Weise wird der Benutzer nur dann vor dem Wegnavigieren gewarnt, wenn er den Textbereich geändert hat, und wird nicht aufgefordert, wenn er das Formular tatsächlich absendet.

Question 4

Damit dies in Chrome und Safari funktioniert, müssten Sie es so machen

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

Referenz: https://developer.mozilla.org/en/DOM/window.onbeforeunload

Question 5

Mit JQuery dieses Zeug ist ziemlich einfach zu tun. Da kann man an Sets binden.

Es reicht NICHT aus, das Onbeforeunload durchzuführen, Sie möchten die Navigation nur auslösen, wenn jemand mit der Bearbeitung begonnen hat.

Question 6

jquerys ‘beforeunload’ hat bei mir super funktioniert

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

Question 7

Für neue Leute, die nach einer einfachen Lösung suchen, probieren Sie es einfach aus Bist du sicher.js

Question 8

Dies ist eine einfache Möglichkeit, die Nachricht anzuzeigen, wenn Daten in das Formular eingegeben werden, und die Nachricht nicht anzuzeigen, wenn das Formular gesendet wird:

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