11

Quiero saber como puedo capturar el evento donde el usuario intenta cerrar la página.

Ejemplo: Cuando redactamos un correo y no lo hemos enviado e intentamos cerrar esa ventana, entonces te emite un mensaje de que confirmes que vas a abandonar la página.

1 respuesta 1

9

Para mostrar un mensaje de confirmación, se usa el evento beforeunload, el handler debe retornar el string de la confirmación. En algunos navegadores esto se establece en el propio evento.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "Esta seguro?";

  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
  return confirmationMessage;              // Gecko, WebKit, Chrome <34
});

Segun la MDN esta es la forma mas cross-browser.

Durante este evento, es licito hacer cambios en el DOM ya que la pagina no se ha descargado, sin embargo alert, confirm o prompt no tienen ningún efecto en los navegadores que cumplan con la especificación HTML5.

Si solamente estas interesado en ejecutar una acción cuando la pagina se descarga, puedes usar el evento unload.

window.addEventListener('unload', function(event) {
   // acciones aquí.
});

Con este evento, el estado de la pagina es el siguiente:

  • La pagina ya no esta visible.
  • Las interacciones con la UI no tienen efecto (window.open, alert, confirm etc.)

Nota:

Hay que tener en cuenta que intentar una llamada ajax en cualquiera de estos eventos puede tener consecuencias negativas si la respuesta del servidor tarda en recibirse. Es recomendable utilizar una solicitud sincrónica, lo cual bloquea el workflow de descarga. Pero esto tiene a su vez, un impacto importante en el tiempo de la descarga de la pagina y en la experiencia del usuario.

3
  • Hola no nesecito mostrar ningun mensaje solo saber que se va a cerrar ...para ejecutar un metodo el 10 ago. 2016 a las 23:58
  • Esta es una gran respuesta del buen @rnd. En ese caso, intenta con esto: window.addEventListener("beforeunload", function () { //Aqui pones el metodo que deseas ejecutar });
    – fredyfx
    el 11 ago. 2016 a las 0:04
  • Ok muchas gracias ..pruebo y te comento el 11 ago. 2016 a las 0:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.