Intentando detectar el evento de cierre del navegador
He probado muchos métodos para detectar eventos de cierre del navegador a través de jQuery o JavaScript. Pero lamentablemente no he podido detectar el cierre. el onbeforeunloadyonunload tampoco funcionan.
¿Cómo detecto la ventana close, unloado beforeunloadlos eventos?
¿Has probado este código?
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 segunda función es opcional para evitar que se le solicite al hacer clic en elementos #lnkLogOuty .btn.
Una cosa más: el mensaje personalizado no funcionará en Firefox (incluso en la última versión). Para obtener más detalles al respecto, vaya a este hilo.
Consultando varios artículos y haciendo algunas pruebas de prueba y error, finalmente desarrollé esta idea que me funciona perfectamente.
La idea era detectar el evento de descarga que se activa al cerrar el navegador. En ese caso, el mouse estará fuera de la ventana, apuntando al botón de cerrar ('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 función ConfirmLeave mostrará el mensaje emergente predeterminado, en caso de que sea necesario personalizar el mensaje, luego devolverá el texto que se mostrará en lugar de una cadena vacía en la función ConfirmLeave() .
Pruebe el siguiente código que me funciona en el entorno Chrome de Linux. Antes de ejecutar, asegúrese de que jquery esté adjunto al documento.
$(document).ready(function()
{
$(window).bind("beforeunload", function() {
return confirm("Do you really want to close?");
});
});
Para simplificar, siga los siguientes pasos:
- abre http://jsfiddle.net/
- ingrese algo en el cuadro html, css o javascript
- intenta cerrar la pestaña en Chrome
Debería mostrar la siguiente imagen:
