Quiero implementar una ventana emergente de confirmación personalizada (que no se parece a una alerta JS) cuando el usuario intenta cerrar la pestaña o la ventana. Ya he revisado muchas preguntas similares y todas las soluciones son realmente antiguas, donde la personalización del texto en esta ventana emergente ahora está obsoleta para todos los navegadores modernos.
Tengo el siguiente código que funciona con el mensaje de tipo de alerta JS predeterminado, pero ¿es posible personalizar esto de todos modos? Por favor recomiende.
<!DOCTYPE html> <html> <head><meta charset="utf-8"></head> <title>Leave Site Pop-up</title> <body> <h1>My First Heading</h1> <input name="name" id="name"/> <script type="text/javascript"> const beforeUnloadListener = (event) => { event.preventDefault(); return event.returnValue = "Are you sure you want to exit?"; }; const nameInput = document.querySelector("#name"); nameInput.addEventListener("input", (event) => { if (event.target.value !== "") { addEventListener("beforeunload", beforeUnloadListener, {capture: true}); } else { removeEventListener("beforeunload", beforeUnloadListener, {capture: true}); } }); </script> </body> </html>No hay forma de mostrar una advertencia personalizada para esta interacción en particular, por razones de seguridad.
Los sitios web fraudulentos abusaron de la funcionalidad para tratar de asustar a las personas para que permanecieran allí por más tiempo, hasta el punto en que los proveedores de navegadores incluso tuvieron que eliminar la capacidad de personalizar el mensaje de aviso. Definitivamente no puede mostrar su propio estilo de alerta / modal --- imagine si ese tipo de sitios web optaran por hacer eso, y luego simplemente no mostraran nada: estaría efectivamente atrapado en el sitio sin forma de salir.
Honestamente, no tiene mucho sentido personalizar esto de todos modos --- para muchos usuarios, tiene sentido que la interfaz de usuario de cierre de pestañas sea parte de su navegador, no de su sitio. Probablemente sería más útil dedicar tiempo a crear algún tipo de mecanismo de guardado, de modo que si las personas cierran el sitio, pueda llevarlos exactamente donde lo dejaron cuando regresen. Puede hacerlo en beforeUnload , utilizando las API localStorage / navigator.beacon (dependiendo de dónde desee almacenar los datos).
Aquí hay algunas ideas:
Si desea mostrar un cuadro de alerta personalizado / mostrar su propia ventana emergente html personalizada DESPUÉS de la ventana emergente de confirmación predeterminada, puede hacer esto: (En este ejemplo, hice un cuadro de alerta con el texto hi! )
const beforeUnloadListener = (event) => { setTimeout(() => alert('hi!')); event.preventDefault(); return event.returnValue = "Are you sure you want to exit?"; };Si desea mostrar un cuadro de alerta / mostrar su propia ventana emergente html personalizada ANTES de que el usuario presione el botón Cerrar pestaña, puede mostrar un cuadro cada vez que el mouse abandona el documento html:
const mouseLeaveListener = (event) => { alert('Where are you going?'); }; document.addEventListener('mouseleave', mouseLeaveListener);