El Atributo ONBEFOREUNLOAD

Es un evento de JavaScript que se activa cuando el usuario intenta abandonar una página web.

El atributo onbeforeunload es un evento de JavaScript que se activa cuando el usuario intenta abandonar una página web (cerrar pestaña, actualizar, navegar a otra URL). Su principal propósito es prevenir pérdidas accidentales de datos al mostrar una confirmación al usuario.

¿Cómo funciona?

  • Disparadores comunes:

    • Cerrar la pestaña/navegador

    • Actualizar la página (F5/Ctrl+R)

    • Navegar a otro enlace

    • Enviar un formulario

  • Propósito:

    • Alertar sobre cambios no guardados

    • Confirmar intención de salida

Sintaxis básica

Como atributo HTML:

<body onbeforeunload="return miFuncion()">

Con JavaScript (recomendado):

window.addEventListener('beforeunload', function(e) {
  e.preventDefault();
  e.returnValue = ''; // Obligatorio para navegadores modernos
  return ''; // Heredado para compatibilidad
});

Ejemplos prácticos

Ejemplo 1: Mensaje genérico

window.onbeforeunload = function(e) {
  e.preventDefault();
  e.returnValue = '';
  return '';
};

Ejemplo 2: Validar cambios no guardados

<form id="miFormulario">
  <input type="text" id="entrada">
</form>

<script>
  let datosModificados = false;

  document.getElementById('entrada').addEventListener('input', () => {
    datosModificados = true;
  });

  window.addEventListener('beforeunload', (e) => {
    if(datosModificados) {
      e.preventDefault();
      e.returnValue = '';
    }
  });
</script>

Limitaciones de mensajes personalizados

Los navegadores modernos ignoran mensajes personalizados por seguridad. El mensaje mostrado es genérico y varía por navegador:

Navegador Mensaje típico
Chrome "Los cambios que haya hecho pueden no guardarse"
Firefox "Esta página pregunta si quieres salir"
Safari "¿Estás seguro de querer abandonar la página?"

Mejores prácticas

Úsalo solo cuando sea necesario:

  • Formularios con datos no guardados

  • Editores de contenido

  • Procesos en curso (ej: carga de archivos)

Combina con banderas de estado:

let cambiosPendientes = false;

// Activar bandera cuando haya cambios
document.addEventListener('input', () => {
  cambiosPendientes = true;
});

window.addEventListener('beforeunload', (e) => {
  if(cambiosPendientes) {
    e.preventDefault();
    e.returnValue = '';
  }
});

Excepciones controladas:

// Permitir salida al enviar formulario
document.getElementById('miFormulario').addEventListener('submit', () => {
  window.onbeforeunload = null;
});

Errores comunes

// MAL: Intentar mostrar mensaje personalizado
window.onbeforeunload = () => {
  return "¡No te vayas!"; // Los navegadores ignoran este texto
};

// MAL: Usar sin validación de estado
window.onbeforeunload = () => { // Se activará siempre
  e.preventDefault();
  e.returnValue = '';
};

Compatibilidad

Navegador Soporte Notas
Chrome ✅ Sí (v. 30+) Mensaje genérico
Firefox ✅ Sí (v. 1.5+) Requiere e.preventDefault()
Safari ✅ Sí Solo en escritorio
Edge ✅ Sí  
Móviles ⚠️ Limitado Comportamiento inconsistente

Alternativas y complementos

Evento onunload:

Se ejecuta después de cerrar la página (no permite cancelar)

window.onunload = function() {
  // Acciones de limpieza final
};

API Page Visibility:

document.addEventListener('visibilitychange', () => {
  if(document.visibilityState === 'hidden') {
    // La pestaña está en segundo plano
  }
});

Cómo eliminar el evento

// Eliminar todos los listeners
window.onbeforeunload = null;

// Eliminar listener específico
function manejarSalida(e) { /*...*/ }

window.addEventListener('beforeunload', manejarSalida);
window.removeEventListener('beforeunload', manejarSalida);

Conclusión

El atributo onbeforeunload es útil para:

  • Prevenir pérdida de datos críticos
  • Mejorar la experiencia del usuario en flujos sensibles

Recuerda:

  1. No abuses: Puede resultar molesto si se usa innecesariamente
  2. Nunca confíes solo en esto: Implementa guardado automático o validación del servidor
  3. Respeta la decisión del usuario: Solo muestra la confirmación cuando realmente haya cambios pendientes

¡Ahora puedes implementar confirmaciones de salida seguras y efectivas!