Wie wird eine Warnmeldung angezeigt, wenn auf die Schaltfläche zum Aktualisieren des Browsers geklickt wird?

Question

Wenn der Benutzer die fragliche Seite aktualisiert, fügt er der Datenbank einen weiteren Datensatz hinzu. Daher möchte ich den Benutzer durch eine Warnmeldung warnen, wenn er die Seite wirklich aktualisieren möchte. Wenn er auf OK klickt, sollte die Seite andernfalls aktualisiert werden Wenn sie auf Abbrechen klicken, wird es nicht funktionieren.

Wie diese Art von Alarm-Box erscheinen lassen, wenn die Schaltfläche Aktualisieren des Browsers in einer Weise angeklickt wird, die Cross-Browser-kompatibel ist?

Answer 1

Sie können es wie folgt tun:

window.onbeforeunload = function() { 
    return "Data will be lost if you leave the page, are you sure?"; 
}; 

Diese eine Aufforderung an den Benutzer zeigen würde, so dass sie abzubrechen. Es ist nicht refresh-spezifisch, aber für Ihre Zwecke (wie das Bearbeiten einer Frage zu SO) scheint das egal zu sein, es ist der Verlust von Informationen, egal wohin Sie gehen.

Answer 2

Es gibt keine Möglichkeit, es zu einfach die Refresh-Aktion zu binden, aber Sie können in window.onbeforeunload suchen. Auf diese Weise können Sie eine Funktion ausführen, die unmittelbar vor dem Entladen der Seite eine Zeichenfolge zurückgibt. Wenn diese Zeichenfolge nicht leer ist, wird ein Popup-Bestätigungsdialogfeld angezeigt, das diese Zeichenfolge und einen anderen Textbaustein enthält, der vom Browser bereitgestellt wird.

Zum Beispiel:

window.onbeforeunload = function() { 
    if (someConditionThatIndicatesIShouldConfirm) { 
     return "If you reload this page, your previous action will be repeated"; 
    } else { 
     return ""; 
    } 
} 

Auch, wenn die aktuelle Seite über einen POST Betrieb geladen wurde, sollte der Browser bereits eine Bestätigung angezeigt werden, wenn der Benutzer es zu aktualisieren versucht. Als allgemeine Regel gilt, dass jede Aktion, die den Status der Daten auf dem Server ändert, über eine POST-Anforderung anstelle einer GET-Anforderung erfolgt.

Answer 3

Dies ist nicht möglich. Das Beste, was Sie tun können, ist das Ereignis onbeforeunload zu verwenden, das aber auf jedes Ereignis ausgelöst wird, das die aktuelle Seite verlässt. Es ist nicht möglich, gezielt auf die Aktualisierungsschaltfläche zuzugreifen.

Siehe z.B. this question auf onbeforeunload

Es könnte besser sein, obwohl eine Dublettenprüfung in Ihre Datenbank zu bauen. Das würde versehentliche Übermittlungen auch mit dem "Zurück" Knopf fangen.

Eine Alternative wäre, ein gelegentliches Zeit Token verwenden, das in die Form eingebaut wird. Wenn zwei Operationen mit demselben Token versucht werden, würden Sie es stoppen.

Answer 4

Es gibt zwei mögliche Wege vorwärts mit diesem, beide ganz anders.

Eine Möglichkeit wäre, einen Event-Handler an das Ereignis onbeforeunload gebunden zu haben, so dass Sie erkennen können, wenn der Benutzer von der aktuellen Seite entfernt ist. Wenn mein Gedächtnis mir jedoch richtig dient, ist onbeforeunload nicht über alle Browser hinweg konsistent (ich glaube nicht, Opera antwortet darauf IIRC, aber habe keine Möglichkeit, derzeit zu testen). Natürlich schlägt diese Lösung fehl, wenn der Benutzer JavaScript ausschaltet. Der zweite und robustere Weg wäre die Implementierung der Post Redirect Get pattern , die verhindert, dass die Daten erneut gepostet werden, wenn ein Benutzer die Seite aktualisiert.

Answer 5

können Sie jquery für diese ... hierfür verwenden Sie js Datei von Jquery zu befestigen haben.

<script> 
var count=0; 
$(document).ready(function(){ 
    alert("hi" + (count++)); 
    confirm("sure?") 
}); 
</script>