Bestätigung vor dem Schließen des Tabs / Browsers

75

Wie kann ich den Benutzer um Bestätigung bitten, bevor er die Seite wie in Google Mail verlässt?

Ich habe an verschiedenen Stellen nach dieser Frage gesucht, aber alles, was sie erwähnen, ist die Verwendung von Javascript window.unload & window.onbeforeunload . Außerdem funktioniert es meistens nicht in Chrom, da es blockiert wird.

javascript html
quelle
Ich habe window.unload & window.onbeforeunload ausprobiert, aber sie funktionierten nicht wie erforderlich.
3
@CiroSantilli: Nein, das ist es nicht. Diese andere Frage onbeforeunload
betrifft

Antworten:

119

Versuche dies:

<script>
window.onbeforeunload = function (e) {
    e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Sure?';
    }

    // For Safari
    return 'Sure?';
};
</script>

Hier ist eine funktionierende jsFiddle

gopi1410
quelle
2
Auch dies wird von keinem Browser deaktiviert, da es vom Benutzer click
gopi1410
Danke vielmals! das brauchte ich. Übrigens, liebe die Geigen-Demo, genau das, was ich wollte.
Hallo, Ihr Code funktioniert, aber er kann nicht unterscheiden, ob der Benutzer auf die Schaltfläche zum Schließen des Browsers oder auf die Navigationsschaltfläche geklickt hat, um zu einer anderen Seite zu gelangen.
user3217843
Das OP hat nicht speziell danach gefragt. Wenn Sie das brauchen, müssen Sie wahrscheinlich prüfen event.target, ob das Klickereignis von Ihrem Seitencontainer stammt.
Gopi1410
8
Ich habe es versucht und es funktioniert nur, wenn zuerst auf etwas anderes geklickt wird, z. Ein Link wurde mit der rechten Maustaste angeklickt. Wenn ich dann auf die Schaltfläche zum Schließen des Browsers klicke, werden Sie aufgefordert, vor dem Schließen wie erwartet. Andernfalls funktioniert es nicht und die Seite wird geschlossen, wenn ich zum Beispiel direkt zur Seite gehe und sofort auf die Schaltfläche "Schließen" klicke. Der Code in der Funktion onbeforeunload trifft jeden, hat aber im letzten Fall eindeutig keine Auswirkung.
Nickornotto
10

Versuche dies:

<script>
    window.onbeforeunload = function(e) {
       return 'Dialog text here.';
    };
</script>

Weitere Infos hier MDN .

Claudia L.
quelle
6

Ich habe Kommentare zum Antwortsatz " Okay" gelesen . Die meisten Benutzer bitten darum, dass die Schaltfläche und einige Links zum Klicken zugelassen werden. Hier wird dem vorhandenen Code eine weitere Zeile hinzugefügt, die funktioniert.

<script type="text/javascript">
  var hook = true;
  window.onbeforeunload = function() {
    if (hook) {

      return "Did you save your stuff?"
    }
  }
  function unhook() {
    hook=false;
  }

Rufen Sie unhook () onClick für die Schaltfläche und die Links auf, die Sie zulassen möchten. Z.B

<a href="#" onClick="unhook()">This link will allow navigation</a>
Musaddiq Khan
quelle
1
Sie könnten direkt tunonclick="hook = false;"
undefiniert
4

Die kürzeste Lösung für das Jahr 2020 (für diejenigen glücklichen Menschen, die IE nicht unterstützen müssen)

Getestet in Chrome, Firefox, Safari.

function onBeforeUnload(e) {
    if (thereAreUnsavedChanges()) {
        e.preventDefault();
        e.returnValue = '';
        return;
    }

    delete e['returnValue'];
}

window.addEventListener('beforeunload', onBeforeUnload);

Tatsächlich zeigt kein moderner Browser (Chrome, Firefox, Safari) den "Rückgabewert" als Frage an den Benutzer an. Stattdessen zeigen sie ihren eigenen Bestätigungstext (abhängig vom Browser). Wir müssen jedoch noch eine (sogar leere) Zeichenfolge zurückgeben, um diese Bestätigung in Chrome auszulösen.

Weitere Erklärungen finden Sie hier und hier auf MDN .

Konstantin Smolyanin
quelle
3

Einfach

function goodbye(e) {
        if(!e) e = window.event;
        //e.cancelBubble is supported by IE - this will kill the bubbling process.
        e.cancelBubble = true;
        e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

        //e.stopPropagation works in Firefox.
        if (e.stopPropagation) {
            e.stopPropagation();
            e.preventDefault();
        }
    }
window.onbeforeunload=goodbye;
Matee Gojra
quelle
0

Wenn Sie basierend auf der Bedingung fragen möchten:

var ask = true
window.onbeforeunload = function (e) {
    if(!ask) return null
    e = e || window.event;
    //old browsers
    if (e) {e.returnValue = 'Sure?';}
    //safari, chrome(chrome ignores text)
    return 'Sure?';
};
yaya
quelle