Wie kann ich verhindern, dass eine Seite in JS entladen wird (weg navigiert)?

Weiß jemand, wie man verhindert, dass eine Seite neu geladen oder weg navigiert wird?

jQuery (Funktion ($) {

    / * global beim Entladen * /
    Warnung = wahr;

    if (Warnung) {
        $ (Fenster) .bind ("entladen", function () { 
            if (bestätigen ("Möchten Sie diese Seite verlassen") == true) {
                // Sie drückten OK
                alert ('ok');
            } else {
                // Sie drückten Abbrechen
                alert ('Abbrechen');
                falsch zurückgeben;
            }}
        });
    }}
});

Ich arbeite gerade an einer E-Commerce-Website. Auf der Seite, auf der Ihre zukünftigen Bestellungen angezeigt werden, können Sie die Anzahl der bestellten Artikel mithilfe der Schaltflächen +/- ändern. Wenn Sie die Mengen auf diese Weise ändern, ändert sich die Bestellung selbst nicht. Sie müssen auf Bestätigen klicken und daher eine positive Aktion ausführen, um die Bestellung zu ändern.

Wenn sie jedoch die Mengen geändert haben und von der Seite weg navigieren, möchte ich sie warnen, dass sie dies tun, falls dies ein Unfall ist, da die geänderten Mengen verloren gehen, wenn sie weg navigieren oder die Seite aktualisieren.

Im obigen Code verwende ich eine globale Variable, die standardmäßig falsch ist (dies gilt nur für Tests). Wenn eine Menge geändert wird, aktualisiere ich diese Variable auf wahr und wenn sie die Änderungen bestätigt, setze ich sie auf falsch .

Wenn die Warnung wahr ist und die Seite entladen wird, biete ich ihnen ein Bestätigungsfeld an. Wenn sie Nein sagen, möchten sie auf dieser Seite bleiben, muss ich das Entladen verhindern. return false funktioniert nicht, lässt den Benutzer dennoch weg navigieren (die Warnungen dienen nur zum Debuggen)

Irgendwelche Ideen?

onbeforeunloadist derjenige, den du willst; Ihre Funktion "sollte der returnValue-Eigenschaft des Event-Objekts einen Zeichenfolgenwert zuweisen und dieselbe Zeichenfolge zurückgeben" . Überprüfen Sie die Dokumente von Microsoft und Mozilla auf Details.

Die von Ihnen zurückgegebene Zeichenfolge wird vom Browser verwendet, um dem Benutzer ein benutzerdefiniertes Bestätigungsfeld anzuzeigen, mit dem er sich weigern kann, dort zu bleiben, wenn er dies wünscht. Dies muss auf diese Weise geschehen, um zu verhindern, dass böswillige Skripte einen Denial-of-Browser-Angriff verursachen.

Dieser Code warnt gemäß Natalies Vorschlag, deaktiviert jedoch die Warnung, wenn ein Formular auf der Seite gesendet wurde. Verwendet JQuery.

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

Sie möchten das Ereignis onbeforeunload verwenden .

window.onbeforeunload = confirmExit;
function confirmExit()
{
    return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";
}

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

Wird in Chrom, Safari und Oper nicht unterstützt

Wie in diesem Kommentar erwähnt, ist nichts in jQuery an das beforeunloadEreignis gebunden .

@ Karim79: Nein, tut es nicht. In jQuery gibt es nichts, was an die Funktion beforeunload gebunden wäre. "entladen" bindet an das Ereignis "entladen". Suche die Quelle, wenn du mir nicht glaubst ;-) - NickFitz

Sie müssen also reines Javascript verwenden, um eine Funktion an das beforeunloadEreignis zu binden .

var warning = true;
$("form").submit(function() {
  warning = false;
});
$('#exit').click(function() {
  window.location.replace('https://stacksnippets.net/js')
});
window.onbeforeunload = function() {
  if(warning) {
    return true;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form>
<input type="submit">
</form>

Versuchen Sie es mit, e.preventDefault()anstatt false zurückzugeben. 'e' wäre das erste Argument für Ihren Rückruf zum Entladen .