Hemos estado indagando por el mundo on line para brindarte la respuesta a tu duda, si tienes dudas déjanos la duda y te contestaremos sin falta, porque estamos para servirte.
Solución:
tl; dr: ya no puede configurar un mensaje personalizado en la mayoría de los navegadores modernos
Una nota rápida (ya que esta es una respuesta antigua): en estos días, todos los principales navegadores no admiten mensajes personalizados en el
beforeunload
surgir. No hay una nueva forma de hacer esto. En caso de que aún necesite admitir navegadores antiguos, puede encontrar la información a continuación.
Para configurar un mensaje de confirmación antes de que el usuario cierre la ventana, puede usar
jQuery
$(window).bind("beforeunload",function(event)
return "You have some unsaved changes";
);
JavaScript
window.onbeforeunload = function()
return "Leaving this page will reset the wizard";
;
Es importante notar que Ud. hipocresía ponerconfirm/alert
en el interiorbeforeunload
Algunas notas más:
- NO todos los navegadores admiten esto (más información en la sección Compatibilidad del navegador en MDN) 2. En Firefox, DEBE interactuar con la página para que este mensaje le aparezca al usuario.
3. Cada navegador puede agregar su propio texto a su mensaje.
Aquí están los resultados usando los navegadores a los que tengo acceso:
Cromo:
Firefox:
Safari:
ES DECIR:
Solo para asegurarse, debe tener jquery incluido
Más información sobre el soporte de los navegadores y la eliminación del mensaje personalizado:
- Chrome eliminó el soporte para mensajes personalizados en la versión 51
- Opera eliminó el soporte para mensajes personalizados en la versión 38
- Firefox eliminó la compatibilidad con mensajes personalizados en la versión 44.0 (aún buscando la fuente de esta información)
- Safari eliminó la compatibilidad con mensajes personalizados en la versión 9.1
Cuando usas
window.onbeforeunload
(o$(window).on("beforeonload")
), ¿es posible mostrar un mensaje personalizado en esa ventana emergente?
Ya no. Todos los principales navegadores han comenzado a ignorar el mensaje real y solo muestran el suyo propio.
Al mirar las respuestas existentes, tengo la sensación de que esto era posible en el pasado usando cosas como
confirm
oalert
oevent.returnValue
pero ahora parece que ya no funcionan.
Correcto. A largo Hace tiempo, podrías usar confirm
o alert
más recientemente podría devolver un string desde un onbeforeunload
manejador y eso string se mostraría. Ahora bien, el contenido de la string se ignora y se trata como una bandera.
Al usar jQuery on
de hecho tienes que usar returnValue
sobre el evento original:
$(window).on("beforeunload", function(e)
// Your message won't get displayed by modern browsers; the browser's built-in
// one will be instead. But for older browsers, best to include an actual
// message instead of just "x" or similar.
return e.originalEvent.returnValue = "Your message here";
);
o a la antigua usanza:
window.onbeforeunload = function()
return "Your message here"; // Probably won't be shown, see note above
;
Eso es todo lo que puedes hacer.
Acabo de hacer aparecer un div que muestra un mensaje en segundo plano. Está detrás del modal, pero esto es mejor que nada. Es un poco turbio, pero al menos puede darle a su usuario alguna información sobre por qué le molesta que no se vaya.
constructor($elem)
$(window).unbind().bind('beforeunload', (e) => this.beforeUnload(e));
beforeUnload(e)
$('#leaveWarning').show();
setTimeout(function()
$('#leaveWarning').hide();
, 1); // set this to 1ms .. since timers are stopped for this modal,
// the message will disappear right after the user clicked one of the options
return "This message is not relevant in most modern browsers.";
Aquí hay un Fiddle en funcionamiento https://jsfiddle.net/sy3fda05/2/