Saltar al contenido

¿Es posible mostrar un mensaje personalizado en la ventana emergente antes de descargar?

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/alerten el interiorbeforeunload

Algunas notas más:

  1. 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:

Alerta de Chrome al salir

Firefox:

Alerta de Firefox al salir

Safari:

Alerta Safar a la salida

ES DECIR:

Alerta de IE al salir

Solo para asegurarse, debe tener jquery incluido

Más información sobre el soporte de los navegadores y la eliminación del mensaje personalizado:

  1. Chrome eliminó el soporte para mensajes personalizados en la versión 51
  2. Opera eliminó el soporte para mensajes personalizados en la versión 38
  3. Firefox eliminó la compatibilidad con mensajes personalizados en la versión 44.0 (aún buscando la fuente de esta información)
  4. 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 o alert o event.returnValuepero ahora parece que ya no funcionan.

Correcto. A largo Hace tiempo, podrías usar confirm o alertmá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 onde 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/

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *