Essayer de détecter un événement de fermeture du navigateur
J'ai essayé de nombreuses méthodes pour détecter un événement de fermeture du navigateur via jQuery ou JavaScript. Mais, malheureusement, je n'ai pas pu détecter la fin. Les méthodes onbeforeunload et onunload ne fonctionnent pas non plus.
Comment détecter les événements de fenêtre close, unload ou beforeunload?
Avez-vous essayé ce code?
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;
});
});
La deuxième fonction est facultative pour éviter les invites en cliquant sur les éléments #lnkLogOut et .btn.
Une dernière chose, l'invite personnalisée ne fonctionnera pas dans Firefox (même dans la dernière version également). Pour plus de détails à ce sujet, veuillez aller à this thread.
En faisant référence à divers articles et en faisant quelques essais et essais, j'ai finalement développé cette idée qui me convient parfaitement.
L'idée était de détecter l'événement de déchargement déclenché par la fermeture du navigateur. Dans ce cas, la souris sera hors de la fenêtre, pointant vers le bouton de fermeture ('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();
});
La fonction ConfirmLeave donnera le message par défaut qui apparaîtra au cas où il serait nécessaire de le personnaliser, puis renverrait le texte à afficher à la place d'une chaîne vide dans function ConfirmLeave ().
Essayez de suivre le code qui fonctionne pour moi dans un environnement Linux chrome. Avant d’exécuter, assurez-vous que jQuery est attaché au document.
$(document).ready(function()
{
$(window).bind("beforeunload", function() {
return confirm("Do you really want to close?");
});
});
Pour suivre simplement les étapes suivantes:
- open http://jsfiddle.net/
- entrer quelque chose en html, css ou javascript
- essayez de fermer l'onglet en chrome
Il devrait montrer l'image suivante:
Bonjour, j'ai une solution complexe, qui ne fonctionne que sur les nouveaux navigateurs:
ouvrez simplement un websocket sur votre serveur, lorsque l'utilisateur ferme la fenêtre, l'événement onclose sera déclenché
Comme Phoenix a dit, utilisez la méthode jQuery .bind, mais pour plus de compatibilité de navigateur, vous devriez retourner une chaîne,
$(document).ready(function()
{
$(window).bind("beforeunload", function() {
return "Do you really want to close?";
});
});
plus de détails peuvent être trouvés à: developer.mozilla.org
Le script suivant donnera un message sur Chrome et IE:
<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>
Chrome
IE
sur Firefox, vous obtiendrez un message générique
Le mécanisme étant synchrone, aucun appel de serveur à retarder ne fonctionnera. Vous pouvez toujours préparer un mécanisme comme une fenêtre modale qui s'affiche si l'utilisateur décide de rester sur la page, mais aucun moyen de l'empêcher de partir.
Réponse à la question dans le commentaire
F5 tirera à nouveau l'événement, de même Atl+F4.
Peut-être vaut-il mieux utiliser la souris de détection de chemin.
Dans BrowserClosureNotice vous avez un exemple de démonstration et une bibliothèque javascript pure pour le faire.
Ce n'est pas parfait, mais évitez les problèmes d'événements de document ou de souris ...
<!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>
Ceci est utilisé pour lorsque l'utilisateur connecté ferme le navigateur ou l'onglet du navigateur, il se déconnectera automatiquement du compte d'utilisateur ...
<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>
S'il vous plaît essayez ce code, cela fonctionne très bien pour moi. Ce message personnalisé arrive dans le navigateur Chrome, mais dans Mozilla, ce message ne s'affiche pas.