Wie kann ich das OnBeforeUnload-Dialogfeld außer Kraft setzen und durch mein eigenes ersetzen?

Question

Ich muss die Benutzer vor nicht gespeicherten Änderungen warnen, bevor sie eine Seite verlassen (ein ziemlich häufiges Problem).

window.onbeforeunload = handler

Das funktioniert, aber es wird ein Standarddialog mit einer irritierenden Standardnachricht angezeigt, die meinen eigenen Text umschließt. Ich muss entweder vollständig die Standardnachricht ersetzen, so dass mein Text klar ist, oder (noch besser) ersetzen Sie den gesamten Dialog mit einem modalen Dialog mit jQuery.

Bisher bin ich gescheitert, und ich habe niemanden gefunden, der eine Antwort zu haben scheint. Ist das überhaupt möglich?

Javascript auf meiner Seite:

<script type="text/javascript">   
    window.onbeforeunload = closeIt;
</script>

Die Funktion closeIt():

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

Mit jQuery und jqModal habe ich versucht, diese Art von Sache (mit einem benutzerdefinierten Dialog bestätigen):

$(window).beforeunload(function () {
    confirm('new message: ' + this.href + ' !', this.href);
    return false;
});

was auch nicht funktioniert - ich kann anscheinend nicht mit dem beforeunload Veranstaltung.

Answer 1

Angular 9 Ansatz:

constructor() {
    window.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {
     if (this.generatedBarcodeIndex) {
      event.preventDefault(); // for Firefox
      event.returnValue = ''; // for Chrome
      return '';
     }
     return false;
    });
   }

Unterstützung von Browsern und die Entfernung der benutzerdefinierten Nachricht:

• Chrome entfernte die Unterstützung für die benutzerdefinierte Nachricht in Version 51 min
• Opera entfernt die Unterstützung für die benutzerdefinierte Nachricht in Version 38 min
• Firefox entfernte die Unterstützung für die benutzerdefinierte Nachricht in Version 44.0 min
• Safari hat die Unterstützung für die benutzerdefinierte Nachricht in Version 9.1 min entfernt.

Answer 2

Versuchen Sie, eine return; anstelle einer Nachricht. Das funktioniert bei mir in den meisten Browsern. (Dies verhindert eigentlich nur, dass Dialoge präsentiert werden)

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}

Answer 3

Ich stand vor dem gleichen Problem, ich war in Ordnung, um seine eigene Dialogbox mit meiner Nachricht zu bekommen, aber das Problem, das ich hatte, war: 1) Es gab eine Meldung bei allen Navigationen, die ich nur beim Schließen haben wollte. 2) mit meiner eigenen Bestätigungsnachricht, wenn der Benutzer Abbrechen wählt, zeigt es immer noch das Standard-Dialogfeld des Browsers.

Im Folgenden finden Sie den Lösungscode, den ich auf meiner Master-Seite geschrieben habe.

function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event; }
    if (evt && evt.clientX >= (window.event.screenX - 150) &&
        evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}
window.onbeforeunload = closeMe;

Answer 4

Sie können erkennen, welche Schaltfläche (ok oder cancel) vom Benutzer gedrückt wurde, da die onunload-Funktion nur aufgerufen wird, wenn der Benutzer die Seite verlässt. Allerdings sind die Möglichkeiten bei dieser Funktion begrenzt, da das DOM zusammengeklappt wird. Man kann zwar Javascript ausführen, aber der Ajax-POST tut nichts, daher kann man diese Methode nicht für die automatische Abmeldung verwenden. Aber es gibt eine Lösung dafür. Die window.open('logout.php') wird in der onunload-Funktion ausgeführt, so dass der Benutzer mit einem neuen Fenster abgemeldet wird.

function onunload = (){
    window.open('logout.php');
}

Dieser Code wird aufgerufen, wenn der Benutzer die Seite verlässt oder das aktive Fenster schließt und der Benutzer durch 'logout.php' abgemeldet wird. Das neue Fenster schließen sofort, wenn logout php besteht aus Code:

window.close();

Answer 5

Versuchen Sie dies

$(window).bind('beforeunload', function (event) {
            setTimeout(function () {
                var retVal = confirm("Do you want to continue ?");
                if (retVal == true) {
                    alert("User wants to continue!");
                    return true;
                }
                else {
                    window.stop();
                    return false;
                }
            });
            return;
        });