Es wurde versucht, ein Ereignis zum Schließen des Browsers zu erkennen

72

Ich habe viele Methoden ausprobiert, um ein Ereignis zum Schließen des Browsers über jQuery oder JavaScript zu erkennen. Leider konnte ich den Abschluss nicht erkennen. Die onbeforeunloadund onunloadMethoden funktionieren auch nicht.

Wie erkenne ich das Fenster close, unloadoder beforeunloadEreignisse?

vjeta
quelle
Ich möchte den Browser nicht schließen, ich möchte das Schließereignis erkennen. Was ich versucht habe, ist window.onbeforeunload = function (e) {var message = "Ihre Bestätigungsnachricht geht hierher.", E = e || window.event; // Für IE und Firefox if (e) {e.returnValue = message; } // Für Safari return message; };
Vjeta
Mit "Schließen" meinen Sie das vollständige Beenden der Browser-Anwendung oder einfach das Schließen eines Tabs oder Fensters? Natürlich ist das Schließen des zuletzt geöffneten Tabs oder Fensters je nach Browser wahrscheinlich dasselbe. Es wäre jedoch immer noch hilfreich, Ihre Bedeutung klar zu definieren.
Ned
1
$(window).unload(function(){var e=confirm("Are you sure you want to exit?");if(e){}})
Surjith SM
Sie können das Schließen des Browsers nicht als solches erkennen, sondern nur das Schließen des aktuellen Dokuments.
Pekka
Mögliches Duplikat des Ereignisses zum Schließen
Pekka

Antworten:

79

Haben Sie diesen Code ausprobiert?

window.onbeforeunload = function (event) {
    var message = 'Important: Please click on \'Save\' button to leave this page.';
    if (typeof event == 'undefined') {
        event = window.event;
    }
    if (event) {
        event.returnValue = message;
    }
    return message;
};

$(function () {
    $("a").not('#lnkLogOut').click(function () {
        window.onbeforeunload = null;
    });
    $(".btn").click(function () {
        window.onbeforeunload = null;
});
});

Die zweite Funktion ist optional, um Aufforderungen beim Klicken auf #lnkLogOutund .btnElemente zu vermeiden .

Eine weitere Sache: Die benutzerdefinierte Eingabeaufforderung funktioniert in Firefox nicht (auch nicht in der neuesten Version). Weitere Details dazu finden Sie in diesem Thread.

Ravimallya
quelle
@ Ravi Code ist in Ordnung. Ich möchte jedoch die Abmeldefunktion starten, wenn der Benutzer auf "Diese Seite verlassen" klickt. Aber wie kann ich feststellen, ob der Benutzer auf "Diese Seite verlassen" geklickt hat oder nicht?
Bit_hunter
Ich bin mir nicht sicher, ob es möglich ist oder nicht. Soweit ich weiß ist das nicht möglich. Können Sie jedoch eine neue Frage mit dem Verweis auf diese Antwort posten, damit die Community sagt.
Ravimallya
@Bit_hunter, Sie könnten eine Funktion ausführen, bei der Sie ein benutzerdefiniertes Div anzeigen, in dem der Benutzer Ja oder Nein drücken kann
Schwarz
Gibt es eine Möglichkeit, die Meldung zu vermeiden, wenn die Seite aktualisiert wird?
Oracleruiz
1
es wird nicht mit benutzerdefinierten Nachrichten angezeigt, nur Nachricht Standard des Browsers
huykon225
50

Unter Bezugnahme auf verschiedene Artikel und einige Testversuche habe ich schließlich diese Idee entwickelt, die perfekt für mich funktioniert.

Die Idee war, das Entladeereignis zu erkennen, das durch Schließen des Browsers ausgelöst wird. In diesem Fall befindet sich die Maus außerhalb des Fensters und zeigt auf die Schaltfläche zum Schließen ('X') .

$(window).on('mouseover', (function () {
    window.onbeforeunload = null;
}));
$(window).on('mouseout', (function () {
    window.onbeforeunload = ConfirmLeave;
}));
function ConfirmLeave() {
    return "";
}
var prevKey="";
$(document).keydown(function (e) {            
    if (e.key=="F5") {
        window.onbeforeunload = ConfirmLeave;
    }
    else if (e.key.toUpperCase() == "W" && prevKey == "CONTROL") {                
        window.onbeforeunload = ConfirmLeave;   
    }
    else if (e.key.toUpperCase() == "R" && prevKey == "CONTROL") {
        window.onbeforeunload = ConfirmLeave;
    }
    else if (e.key.toUpperCase() == "F4" && (prevKey == "ALT" || prevKey == "CONTROL")) {
        window.onbeforeunload = ConfirmLeave;
    }
    prevKey = e.key.toUpperCase();
});

Die ConfirmLeave-Funktion gibt die Popup-Standardnachricht aus, falls die Nachricht angepasst werden muss, und gibt dann den anzuzeigenden Text anstelle einer leeren Zeichenfolge in der Funktion ConfirmLeave () zurück .

shiv
quelle
1
Was ist mit dem Starten von Ajax, wenn der Benutzer die Schaltfläche "Seite verlassen" drückt? Ist dies möglich? wenn nicht, was kann die Alternative sein
Aitazaz Khan
Meine Lieblingsantwort. Dadurch wird vermieden, dass alle möglichen DOM-Elemente aufgelistet werden, die Sie aus der Seite herausführen könnten. Außerdem erkennt der Code auch Tastenkombinationen zum Schließen von Registerkarten und Fenstern.
GigiSan
1
Hallo Shiv. Dies scheint in den meisten Fällen gut zu funktionieren, außer bei ALT + F4, wenn keine andere Registerkarte vorhanden ist. Öffnen Sie die Seite im Browser und drücken Sie Alt + F4. Dies schließt den Browser ohne Nachricht. Strg + F4 funktioniert in der gleichen Situation. Irgendeine Idee?
Milind Thakkar
1
Es wird auch ausgelöst, wenn Sie auf den Browser vorwärts oder rückwärts klicken, da sich die Maus für diese Schaltflächen außerhalb des Fensters befindet. :-(
Milind Thakkar
1
Die Lösung ist gut, in meinem Fall scheint sie jedoch nur zu funktionieren, wenn die Entwicklerkonsole im Browser geöffnet ist. Wenn ich auf die Seite klicke (der Fokus liegt auf der Seite), funktioniert das nicht. Irgendeine Idee, warum das passiert?
Rahul Vala
12

Versuchen Sie, den folgenden Code für mich unter Linux-Chrome-Umgebung zu verwenden. Stellen Sie vor dem Ausführen sicher, dass jquery an das Dokument angehängt ist.

$(document).ready(function()
{
    $(window).bind("beforeunload", function() { 
        return confirm("Do you really want to close?"); 
    });
});

Befolgen Sie für einfache folgende Schritte:

  1. öffnen http://jsfiddle.net/
  2. Geben Sie etwas in das Feld HTML, CSS oder Javascript ein
  3. Versuchen Sie, die Registerkarte in Chrome zu schließen

Es sollte folgendes Bild zeigen:

Geben Sie hier die Bildbeschreibung ein

Khamidulla
quelle
Entschuldigung, in Ubuntu habe ich Mozilla 33 nicht. Sie können also die Implementierung von jsfiddle nachschlagen
Khamidulla
Fiddle URL funktioniert nicht mehr. Bitte überprüfen und aktualisieren
Shashank Vivek
2
@ShashankVivek Geigenlink funktioniert. Lesen Sie die Antwort noch einmal. Sie haben die Ereignisbehandlung "beforeunload" aus der aktuellen Version der Web-Benutzeroberfläche entfernt. Sie sehen also kein Benachrichtigungsfenster mehr in jsfiddle. Mit Script Upper können Sie das Ereignis jedoch weiterhin selbst behandeln. Nichts was ich tun kann.
Khamidulla
Blockierte Bestätigung ('Möchten Sie wirklich schließen?') Vor dem Entladen.
Amin Rahimi
7

Hallo, ich habe eine knifflige Lösung, die nur mit neuen Browsern funktioniert:

Öffnen Sie einfach einen Websocket für Ihren Server. Wenn der Benutzer das Fenster schließt, wird das Ereignis onclose ausgelöst

Wutzebaer
quelle
Hallo, können wir ein modales Fenster / ein benutzerdefiniertes Popup für dieses Onclose-Ereignis anzeigen?
Jyoti Duhan
@JyotiDuhan nein, Sie können es nur serverseitig erkennen
wutzebaer
4

Das folgende Skript gibt eine Nachricht in Chrome und IE aus:

<script>
window.onbeforeunload = function (e) {
// Your logic to prepare for 'Stay on this Page' goes here 

    return "Please click 'Stay on this Page' and we will give you candy";
};
</script>

Chrom
Geben Sie hier die Bildbeschreibung ein

IE
Geben Sie hier die Bildbeschreibung ein

In Firefox erhalten Sie eine allgemeine Nachricht

Geben Sie hier die Bildbeschreibung ein

Der Mechanismus ist synchron, sodass keine Serveraufrufe zur Verzögerung funktionieren. Sie können dennoch einen Mechanismus wie das modale Fenster vorbereiten, der angezeigt wird, wenn der Benutzer auf der Seite bleibt, aber keine Möglichkeit, ihn am Verlassen zu hindern.

Antwort auf Frage im Kommentar

F5wird das Ereignis erneut auslösen, ebenso Atl+ F4.

Matas Vaitkevicius
quelle
Ich möchte nur erkennen, wenn der Benutzer Tab oder Navigator und Alt + F4 schließt.
Kiquenet
@Kiquenet Ich habe gerade Alt + f4 auf IE8 getestet und es hat einen Auslösemechanismus ausgelöst. Ich muss beim Testen von Crome, das in allen Browsern (IE, Chrome, Firefox) ausgelöst wird, etwas falsch gemacht haben
Matas Vaitkevicius
1
Was ist mit dem Starten von Ajax, wenn der Benutzer die Schaltfläche "Seite verlassen" drückt? Ist dies möglich? wenn nicht, was kann die Alternative sein
Aitazaz Khan
1
Gibt es eine Möglichkeit, die Meldung zu vermeiden, wenn die Seite aktualisiert wird?
Oracleruiz
Ich wollte das nahe Ereignis für eine HTA-App erkennen, diese Lösung funktionierte perfekt.
Freginold
3

Wie Phoenix sagte, verwenden Sie die jQuery .bind-Methode, aber für mehr Browserkompatibilität sollten Sie einen String zurückgeben.

$(document).ready(function()
{
    $(window).bind("beforeunload", function() { 
        return "Do you really want to close?"; 
    });
});

Weitere Details finden Sie unter: developer.mozilla.org

Macondo
quelle
1

jQuery .bind () ist veraltet. Verwenden Sie stattdessen .on ()

$(window).on("beforeunload", function() {
    runBeforeClose();
});
ow3n
quelle
0

Vielleicht ist es besser, die Pfaderkennungsmaus zu verwenden.

In BrowserClosureNotice haben Sie ein Demo-Beispiel und eine reine Javascript-Bibliothek, um dies zu tun.

Es ist nicht perfekt, aber vermeiden Sie Probleme mit Dokument- oder Mausereignissen ...

Manufosela
quelle
Was ist, wenn der Benutzer nur mit der Maus über die Schaltfläche zum Schließen fährt, aber nie drückt? Und wie geht man mit der Situation in mobilen Browsern um?
Schwarz
Dieser Code erkennt, wann die Maus auf die Schaltfläche zum Schließen wechselt, erkennt jedoch nicht, wann die Schaltfläche zum Schließen gedrückt wird. Wenn Sie möchten, können Sie dieses Ereignis auch hinzufügen. In meinem Fall möchte ich das Schließen nicht vermeiden, ich möchte Informationen anzeigen, wenn ich denke, dass Sie daran denken, die Seite zu schließen.
Manufosela
Dies funktioniert jedoch ohnehin nicht in mobilen Browsern, sodass die Lösung nicht das Gelb aus dem Ei ist.
Schwarz
Natürlich ist dieser Ansatz keine Lösung für mobile Browser
Manufosela
0
<script type="text/javascript">
window.addEventListener("beforeunload", function (e) {

  var confirmationMessage = "Are you sure you want to leave this page without placing the order ?";
  (e || window.event).returnValue = confirmationMessage;
  return confirmationMessage;

});
</script>

Bitte versuchen Sie diesen Code, das funktioniert gut für mich. Diese benutzerdefinierte Nachricht kommt in den Chrome-Browser, aber in Mozilla wird diese Nachricht nicht angezeigt.

user2753425
quelle
-1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" language="javascript">

var validNavigation = false;

function endSession() {
// Browser or broswer tab is closed
// Do sth here ...
alert("bye");
}

function wireUpEvents() {
/*
* For a list of events that triggers onbeforeunload on IE
* check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
*/
window.onbeforeunload = function() {
  if (!validNavigation) {

            var ref="load";
      $.ajax({
            type: 'get',
            async: false,
            url: 'logout.php',
 data:
            {
                ref:ref               
            },
             success:function(data)
            {
                console.log(data);
            }
            });
     endSession();
  }
 }

// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
  validNavigation = true;
}
});

// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});

 // Attach the event submit for all forms in the page
 $("form").bind("submit", function() {
 validNavigation = true;
 });

 // Attach the event click for all inputs in the page
 $("input[type=submit]").bind("click", function() {
 validNavigation = true;
 });

}

// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();  
}); 
</script> 

Dies wird verwendet, wenn der angemeldete Benutzer den Browser oder die Browser-Registerkarte schließt und das Benutzerkonto automatisch abmeldet ...

ramesh kanna
quelle
Bitte teilen Sie einige Erklärungen, warum dies funktioniert und wie es funktioniert
Tomaž Bratanič
Dies wird verwendet, wenn der angemeldete Benutzer den Browser oder die Browser-Registerkarte schließt und das Benutzerkonto automatisch abmeldet. Und Änderungen in der Datenbank auch
vornehmen
-2

Sie können so etwas versuchen.

<html>
<head>
    <title>test</title>
    <script>
        function openChecking(){
            // alert("open");
            var width = Number(screen.width-(screen.width*0.25));  
            var height = Number(screen.height-(screen.height*0.25));
            var leftscr = Number((screen.width/2)-(width/2)); // center the window
            var topscr = Number((screen.height/2)-(height/2));
            var url = "";
            var title = 'popup';
            var properties = 'width='+width+', height='+height+', top='+topscr+', left='+leftscr;
            var popup = window.open(url, title, properties);
            var crono = window.setInterval(function() {
                if (popup.closed !== false) { // !== opera compatibility reasons
                    window.clearInterval(crono);
                    checkClosed();
                }
            }, 250); //we check if the window is closed every 1/4 second
        }   
        function checkClosed(){
            alert("closed!!");
            // do something
        }
    </script>    
</head>
<body>
    <button onclick="openChecking()">Click Me</button>
</body>
</html>

Wenn der Benutzer das Fenster schließt, wird der Rückruf ausgelöst.

Salvador P.
quelle