JavaScript vor dem Verlassen der Seite

233

Ich möchte eine Bestätigung machen, bevor der Benutzer die Seite verlässt. Wenn er ok sagt, wird es auf eine neue Seite umleiten oder abbrechen, um zu gehen. Ich habe versucht, es mit Onunload zu schaffen

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

Aber es bestätigt, nachdem die Seite bereits geschlossen wurde? Wie mache ich das richtig?

Es wäre sogar noch besser, wenn jemand zeigt, wie es mit jQuery geht?

javascript jquery kd7
quelle

1

ha ha ha ... Ja, das ist ganz richtig ... aber zum Glück ist es nicht meine Seite ... mein Kunde bittet darum, es auf seiner Seite zu tun

kd7

25

Ja, aber ich freue mich sehr über diese Benachrichtigungen, wenn ich eine nicht gespeicherte Google Mail-Seite beenden möchte.

Etdashou

Beachten Sie, dass unter Firefox 4+ nur eine Standardnachricht anstelle Ihrer benutzerdefinierten Nachricht angezeigt wird. Developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes

Taufe

4

Mögliches Duplikat des Benutzers warnen, bevor die Webseite mit nicht gespeicherten Änderungen verlassen wird

Wasim A.

352

onunload(oder onbeforeunload) kann den Benutzer nicht auf eine andere Seite umleiten. Dies ist aus Sicherheitsgründen.

Wenn Sie eine Eingabeaufforderung anzeigen möchten, bevor der Benutzer die Seite verlässt, verwenden Sie onbeforeunload:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

Oder mit jQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

Dadurch wird der Benutzer nur gefragt, ob er die Seite verlassen möchte oder nicht. Sie können ihn nicht umleiten, wenn er auf der Seite bleiben möchte. Wenn sie sich entscheiden zu gehen, geht der Browser dorthin, wo sie es angewiesen haben.

Sie können damit onunloadDinge erledigen, bevor die Seite entladen wird, aber Sie können nicht von dort umleiten (Chrome 14+ blockiert darin Warnungen onunload):

window.onunload = function() {
    alert('Bye.');
}

Oder mit jQuery:

$(window).unload(function(){
  alert('Bye.');
});

Rakete Hazmat
quelle

12

@Joseph: Wenn Sie eine Zeichenfolge von zurückgeben onbeforeunload, fügt der Browser diese Zeichenfolge in ein eigenes Bestätigungsfeld ein. Die Verwendung confirmist in onunloadund nutzlos onbeforeunload, da nur der Browser steuern kann, wohin sie geht, nicht Sie. Schauen Sie sich diese Demo an: jsfiddle.net/3kvAC

Rocket Hazmat

7

Nur eine Notiz, wenn Sie eine Nachricht unter bestimmten Bedingungen anzeigen möchten onbeforeunload, return falseführt dazu, dass der Browser in einem Dialogfeld "false" anzeigt . Sie müssen, return undefinedwenn Sie das Fenster ohne Benutzerwarnung schließen lassen möchten.

Dan Fitch

5

@Adam: Firefox hat beschlossen, die Anpassung dieser Nachricht nicht zuzulassen. Das ist Teil des Browsers, daher können Sie dieses Verhalten nicht überschreiben. Andere Browser entfernen möglicherweise auch die Möglichkeit, die Nachricht anzupassen. Siehe: developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

Rocket Hazmat

8

@ RocketHazmat Chrome hat auch. Es heißt jetzt nur: Möchten Sie diese Seite verlassen? Von Ihnen vorgenommene Änderungen werden möglicherweise nicht gespeichert.

Programmierer5000

6

@ programmer5000 Es ist gut, weil einige bösartige Websites einige nutzlose Warnungen anzeigen können (zum Beispiel "Sie können nicht gehen, ohne Ihre Bankdaten anzugeben")

Naman

34

Dieser Code, wenn Sie auch feststellen, dass sich der Formularstatus geändert hat oder nicht.

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Sie können die Google JQuery Form Serialize-Funktion verwenden. Dadurch werden alle Formulareingaben erfasst und im Array gespeichert. Ich denke diese Erklärung ist genug :)

Wasim A.
quelle

Irgendeine Idee, warum das nicht funktionieren würde? Könnte es von anderen js-Funktionen / jquery-Plugins überschrieben werden? Ich verwende eine Webrtc-App und möchte einige Dinge "schließen", wenn der Client das Fenster schließt, sodass das Schließen des Fensters erforderlich ist.

Hey

1

Dies kann von jedem anderen Plugin usw. überschrieben werden. Meistens hat der Entwickler einen Fehler mit der Auswahl gemacht. Wenn Sie Zweifel an der Überschreibung haben, setzen Sie Ihren Abfragecode vor das Schließen des </ body> -Tags.

Wasim A.

Ja ... Wenn Sie über JS-Code verfügen, mit dem Eingabefelder nach dem Laden der Seite ausgeblendet oder deaktiviert werden, wird die Prüfung zum Vergleichen der ausgeblendeten \ deaktivierten Felder nicht serialisiert. Die Prüfung schlägt natürlich fehl. ;) Es gibt diese Problemumgehung

Leniel Maccaferri

Übrigens ... hier gibt es einen besseren Weg: stackoverflow.com/q/16322042/114029

Leniel Maccaferri

1

Es ist zu beachten, dass dies auch beim Drücken der Senden-Taste eine Warnung auslöst. Man könnte das Formular erneut klicken, indem man auf die Schaltfläche "Senden" klickt, um dies zu verhindern.

Adam

19

Dies warnt beim Verlassen der aktuellen Seite

<script type='text/javascript'>
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; 

</script>

Ajit Singh
quelle

13

Dies habe ich getan, um die Bestätigungsmeldung anzuzeigen, sobald ich nicht gespeicherte Daten habe

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

Wenn Sie "undefined" zurückgeben, wird die Bestätigung deaktiviert

Hinweis: Die Rückgabe von "null" funktioniert nicht mit dem Internet Explorer

Sie können auch "undefined" verwenden, um die Bestätigung zu deaktivieren

window.onbeforeunload = undefined;

Mina Matta
quelle

11

Um ein Popop mit Chrome 14+ zu haben, müssen Sie Folgendes tun:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

Der Benutzer wird gefragt, ob er bleiben oder gehen möchte.

David Bélanger
quelle

Irgendeine Idee, warum das nicht funktioniert? Ich verwende Chrome (neueste Version) zusammen mit einer Reihe von JQuery-Plugins, erhalte jedoch keine Warnung, wenn ich das Fenster schließe.

Hey

@hey Warum die Abstimmung? Es funktioniert ... Sie müssen sicherstellen, dass es außerhalb von liegt, jQuery(document)und ich schlage vor, es nach dem Laden aller Plugins zu korrigieren. Außerdem macht dieses Snippet keine Warnung ... es ist nur eine Demo mit return.

David Bélanger

7

Sie können den folgenden Einzeiler verwenden, um den Benutzer immer zu fragen, bevor Sie die Seite verlassen.

window.onbeforeunload = s => "";

In dieser Antwort erfahren Sie, ob der Benutzer etwas auf der Seite geändert hat .

spencer.sm
quelle

Wird dies auch ausgelöst, wenn ich die Seite aktualisiere oder einfach beende?

Si8

Ja, es wird beim Aktualisieren oder Beenden ausgelöst.

spencer.sm

Gibt es überhaupt zu wissen, wann es aktualisiert wird und wann es zum ersten Mal ist?

Si8

Wenn ein Benutzer zum ersten Mal auf die Seite kommt, im Gegensatz zum Benutzer, der die Seite aktualisiert.

Si8

Ach nein. Es wird nicht ausgelöst, wenn ein Benutzer zum ersten Mal auf die Seite kommt. Nur beim Schließen oder Ändern von Seiten oder beim Aktualisieren.

spencer.sm

4

Normalerweise möchten Sie diese Nachricht anzeigen, wenn der Benutzer Änderungen an einem Formular vorgenommen hat, diese jedoch nicht gespeichert werden.

Verwenden Sie diesen Ansatz, um eine Nachricht nur dann anzuzeigen, wenn der Benutzer etwas geändert hat

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}

Simon Franzen
quelle

3

<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() {
    return "Write something clever here...";
}
</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

Emir Mamashov
quelle

1

Nur ein bisschen hilfreicher, aktivieren und deaktivieren

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');

l2aelba
quelle

1

Die meisten Lösungen hier haben bei mir nicht funktioniert, daher habe ich die hier gefundene verwendet

Ich habe auch eine Variable hinzugefügt, um das Bestätigungsfeld zuzulassen oder nicht

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});

Raj Sharma
quelle

JavaScript vor dem Verlassen der Seite

Antworten: