¿Cómo puedo anular el cuadro de diálogo OnBeforeUnload y reemplazarlo con el mío?

Nuestro team especializado pasados muchos días de trabajo y de juntar de información, obtuvieron la solución, nuestro deseo es que resulte de utilidad para tu proyecto.

Solución:

No puede modificar el diálogo predeterminado para onbeforeunloadpor lo que su mejor apuesta puede ser trabajar con él.

window.onbeforeunload = function() 
    return 'You have unsaved changes!';

Aquí hay una referencia a esto de Microsoft:

Cuando una string se asigna a la propiedad returnValue de window.event, aparece un cuadro de diálogo que brinda a los usuarios la opción de permanecer en la página actual y conservar el string que le fue asignado. La declaración predeterminada que aparece en el cuadro de diálogo, “¿Está seguro de que desea navegar fuera de esta página?… Presione Aceptar para continuar o Cancelar para permanecer en la página actual”, no se puede eliminar ni modificar.

El problema parece ser:

1. Cuando onbeforeunload se llama, tomará el valor de retorno del controlador como window.event.returnValue.
2. A continuación, analizará el valor de retorno como un string (a menos que sea null).
3. Ya que false se analiza como un stringse disparará el cuadro de diálogo, que luego pasará un apropiado true/false.

El resultado es que no parece haber una forma de asignar false a onbeforeunload para evitar que aparezca en el diálogo predeterminado.

Notas adicionales sobre jQuery:

• Configuración del evento en jQuery mayo ser problemático, ya que eso permite que otros onbeforeunload eventos a ocurrir también. Si solo desea que ocurra su evento de descarga, me quedaría con JavaScript simple para ello.

• jQuery no tiene un atajo para onbeforeunload así que tendrías que usar el genérico bind sintaxis.

  $(window).bind('beforeunload', function()  );
  

Editar 04/09/2018: los mensajes personalizados en los cuadros de diálogo onbeforeunload están obsoletos desde chrome-51 (cf: nota de la versión)

Lo que funcionó para mí, usando jQuery y probado en IE8, Chrome y Firefox, es:

$(window).bind("beforeunload",function(event) 
    if(hasChanged) return "You have unsaved changes";
);

Es importante no devolver nada si no se requiere un aviso, ya que aquí hay diferencias entre IE y otros comportamientos del navegador.

Si bien no hay nada que pueda hacer con respecto a la caja en algunas circunstancias, puede interceptar a alguien que haga clic en un enlace. Para mí, valió la pena el esfuerzo para la mayoría de los escenarios y, como alternativa, dejé el evento de descarga.

He usado Boxy en lugar del jQuery Dialog estándar, está disponible aquí: http://onehackoranother.com/projects/jquery/boxy/

$(':input').change(function() 
    if(!is_dirty)
        // When the user changes a field on this page, set our is_dirty flag.
        is_dirty = true;
    
);

$('a').mousedown(function(e) 
    if(is_dirty) 
        // if the user navigates away from this page via an anchor link, 
        //    popup a new boxy confirmation.
        answer = Boxy.confirm("You have made some changes which you might want to save.");
    
);

window.onbeforeunload = function() 
if((is_dirty)&&(!answer))
            // call this if the box wasn't shown.
    return 'You have made some changes which you might want to save.';
    
;

Puede adjuntar a otro evento y filtrar más sobre qué tipo de ancla se hizo clic, pero esto funciona para mí y lo que quiero hacer y sirve como ejemplo para que otros lo usen o mejoren. Pensé en compartir esto para aquellos que quieren esta solución.

He recortado el código, por lo que es posible que esto no funcione como está.

Reseñas y calificaciones de la guía

Si posees alguna desconfianza y disposición de avanzar nuestro escrito te mencionamos ejecutar un exégesis y con gusto lo estudiaremos.

---

---

Utiliza Nuestro Buscador