Confirmación antes de cerrar la pestaña o el navegador utilizando Javascript

En este artículo te mostraremos un pequeño snippet de Javascript para mostrar una ventana de diálogo antes de cerrar una pestaña del navegador o el propio navegador para que el usuario pueda confirmar que se está yendo del sitio conscientemente. Esto puede resultar muy útil tanto para el usuario, como para el propio sitio web. Para que los entendáis mejor, os lo explico con dos casos prácticos:

Caso 1: En un sitio web, un usuario debe rellenar un formulario muy largo, pero antes de acabar se le olvida darle al botón guardar y cierra su actual pestaña o el navegador. En dicho caso, el usuario perderá toda la información introducida y, casi seguro, que recordará negativamente tu aplicación.

Caso 2: Tu sitio web cuenta con una promoción especial para los visitantes de la página. Un visitante visita otra página y abandona tu web sin conocer esas ofertas. Estarías perdiendo dinero.

Mediante una ventana avisando al usuario de lo que va a pasar si cierra el contenido, estaremos evitando los dos casos anteriores. Y no solo para eso casos, puedes utilizar las ventanas de confirmación de Javascript para muchos otros casos.

Mediante el evento onbeforeunload, puedes mostrar una ventana de confirmación antes de que el usuario cierre el contenido. Dicho evento muestra una ventana de diálogo que informa a los usuarios si están seguros de abandonar la web.

Lo que tienes que hacer es insertar este código Javascript en la página web deseada. Solo cambia el valor de la variable confMessage, por el mensaje que quieras mostrar al usuario.

<script type="text/javascript">
var areYouReallySure = false;
function areYouSure() {
    if(allowPrompt){
        if (!areYouReallySure && true) {
            areYouReallySure = true;
            var confMessage = "***************************************nn E S P E R A !!! nnAntes de abandonar nuestra web, síguenos en nuestras redes sociales como Facebook, Twitter o Instagram.nnnYA PUEDES HACER CLIC EN EL BOTÓN CANCELAR SI QUIERES...nn***************************************";
            return confMessage;
        }
    }else{
        allowPrompt = true;
    }
}

var allowPrompt = true;
window.onbeforeunload = areYouSure;
</script>

Fuente: codexworld.com