Wie implementiert man eine „Seite verlassen'? Bestätigung für nicht gespeicherte Änderungen?

So implementieren Sie die Frage „Möchten Sie diese Seite wirklich verlassen?“ Bestätigung, wenn nicht gespeicherte Änderungen vorhanden sind

Beim Durchsuchen von Webseiten wird Benutzern möglicherweise eine Bestätigungsaufforderung angezeigt, bevor sie eine Seite verlassen, auf der nicht gespeicherte Änderungen vorgenommen wurden. Diese Bestätigung dient dazu, Benutzer darauf aufmerksam zu machen, dass ihre nicht gespeicherten Änderungen verloren gehen, wenn sie fortfahren. In diesem Artikel wird untersucht, wie diese Funktionalität implementiert werden kann, wobei auf die spezifischen Herausforderungen eingegangen wird, mit denen Browser mit unterschiedlichen Funktionen konfrontiert sind.

Eine Methode besteht darin, das window.onbeforeunload-Ereignis zu nutzen. In der Vergangenheit konnte diesem Ereignis ein Zeichenfolgenwert zugewiesen werden, um eine benutzerdefinierte Bestätigungsnachricht anzuzeigen. Moderne Browser betrachten dies jedoch als Sicherheitsrisiko und zeigen jetzt nur generische Nachrichten an. Infolgedessen wurde die Implementierung wie folgt vereinfacht:

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

// Remove navigation prompt
window.onbeforeunload = null;

Für die Unterstützung älterer Browser ist ein umfassenderer Ansatz erforderlich. Dem window.onbeforeunload-Ereignis muss eine Funktionsreferenz zugewiesen werden, und in älteren Browsern muss die returnValue-Eigenschaft des Ereignisses festgelegt werden:

var confirmOnPageExit = function (e) {
    // Get the event object
    e = e || window.event;

    // Set the return value to display the message
    if (e) {
        e.returnValue = 'Confirm exit? Unsaved changes will be lost.';
    }

    // Return the message for newer browsers
    return 'Confirm exit? Unsaved changes will be lost.';
};

Um die Bestätigungsaufforderung umzuschalten, weisen Sie einfach die Funktion „confirmOnPageExit“ dem Fenster zu. onbeforeunload, um es zu aktivieren und die Funktion zu entfernen, um es zu deaktivieren:

// Turn it on
window.onbeforeunload = confirmOnPageExit;

// Turn it off
window.onbeforeunload = null;

Um nicht gespeicherte Änderungen zu verfolgen, ist es notwendig sich auf das spezifische Validierungsframework zu verlassen, das verwendet wird. In jQuery beispielsweise zeigt das folgende Codefragment, wie Änderungen an Eingabefeldern überwacht und die Bestätigungsaufforderung ausgelöst werden:

$('input').change(function() {
    if( $(this).val() != "" ) {
        window.onbeforeunload = confirmOnPageExit;
    }
});

Das obige ist der detaillierte Inhalt vonWie implementiert man eine „Seite verlassen'? Bestätigung für nicht gespeicherte Änderungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!