los onbeforeunload propiedad de la WindowEventHandlers mixin es el EventHandler para procesar beforeunload eventos. Estos eventos se activan cuando una ventana está a punto de unload sus recursos. En este punto, el documento aún está visible y el evento aún se puede cancelar.

Nota: Para combatir las ventanas emergentes no deseadas, algunos navegadores no muestran las indicaciones creadas en beforeunload controladores de eventos a menos que se haya interactuado con la página. Además, algunos no los muestran en absoluto.

Nota: No deberías usar el beforeunload evento con sendBeacon(). Ver el Navigator.sendBeacon() página para obtener más detalles y mejores prácticas.

Sintaxis

window.addEventListener("beforeunload",function(event)...);
window.onbeforeunload=function(event)...;

Normalmente, es mejor usar window.addEventListener() y el beforeunload evento, en lugar de onbeforeunload.

Ejemplo

Este ejemplo avisa al usuario antes de descargar.

La especificación HTML establece que los autores deben utilizar la Event.preventDefault() método en lugar de usar Event.returnValue para avisar al usuario.

window.addEventListener('beforeunload',function(e)// Cancel the event
  e.preventDefault();// If you prevent default behavior in Mozilla Firefox prompt will always be shown// Chrome requires returnValue to be set
  e.returnValue ='';);

Garantice la descarga del navegador quitando el returnValue propiedad del evento 

window.addEventListener('beforeunload',function(e)// the absence of a returnValue property on the event will guarantee the browser unload happensdelete e['returnValue'];);

Notas

Cuando su página usa JavaScript para representar contenido, JavaScript puede detenerse al salir y luego navegar de regreso a la página. Puedes unirte a window.onbeforeunload para evitar que el navegador almacene completamente la página en caché. Si lo hace, JavaScript en la página se activará en la siguiente visita de regreso y actualizará el contenido como desee.

Especificaciones

El evento fue introducido originalmente por Microsoft en Internet Explorer 4 y estandarizado en la especificación HTML5.

Especificación Estado Comentario
Estándar de vida HTML
La definición de ‘onbeforeunload’ en esa especificación.		 Estándar de vida
HTML 5.1
La definición de ‘GlobalEventHandlers’ en esa especificación.		 Recomendación
HTML5
La definición de ‘GlobalEventHandlers’ en esa especificación.		 Recomendación

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
onbeforeunload 1 12 1 4 12 3 1 18 4 12 1 1.0
custom_text_support Sí-51 No Sí-44 sí Sí-38 Sí-9 Sí-51 Sí-51 Sí-44 Sí-41 No Sí-5.0

La especificación HTML establece que los autores deben utilizar la Event.preventDefault() método en lugar de usar Event.returnValue para avisar al usuario. Sin embargo, esto aún no es compatible con todos los navegadores.

Cuando este evento regresa (o establece el returnValue propiedad a) un valor distinto de null o undefined, se le pedirá al usuario que confirme la descarga de la página. En los navegadores más antiguos, el valor de retorno del evento se muestra en este cuadro de diálogo. A partir de Firefox 44, Chrome 51, Opera 38 y Safari 9.1, un genérico string que no esté bajo el control de la página web se mostrará en lugar de la devolución string. Por ejemplo:

  • Firefox muestra el string, “Esta página le pide que confirme que desea salir; es posible que los datos que ingresó no se guarden”. (ver error 588292).
  • Chrome muestra el string, “¿Quieres salir de este sitio? Es posible que los cambios que hayas realizado no se guarden”. (ver Estado de la plataforma Chrome).

Internet Explorer no respeta la null devuelve el valor y lo mostrará a los usuarios como “null”texto. Tienes que usar undefined para omitir el mensaje.

En algunos navegadores, las llamadas a window.alert(), window.confirm(), y window.prompt() puede ignorarse durante este evento. Ver el Especificación HTML para más detalles.

Tenga en cuenta también que varios navegadores ignoran el resultado del evento y no piden confirmación al usuario en absoluto. En tales casos, el documento siempre se descargará automáticamente. Firefox tiene un interruptor llamado dom.disable_beforeunload en acerca de: config para habilitar este comportamiento. A partir de Chrome 60, la confirmación será omitido si el usuario no ha realizado un gesto en el marco o la página desde que se cargó. Presionar F5 en la página parece contar como interacción del usuario, mientras que hacer clic con el mouse en la flecha de actualización o presionar F5 con Chrome DevTools enfocado no cuenta como interacción del usuario (a partir de Chrome 81).