javascript - mensaje - onbeforeunload ejemplo

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

Question

Debo advertir a los usuarios sobre los cambios no guardados antes de que salgan de una página (un problema bastante común).

window.onbeforeunload=handler

Esto funciona pero genera un diálogo predeterminado con un mensaje estándar irritante que envuelve mi propio texto. Necesito reemplazar completamente el mensaje estándar, para que mi texto sea claro, o (incluso mejor) reemplazar todo el diálogo con un diálogo modal usando jQuery.

Hasta ahora he fallado y no he encontrado a nadie más que parezca tener una respuesta. ¿Es incluso posible?

Javascript en mi página:

<script type="text/javascript">   
   window.onbeforeunload=closeIt;
</script>

La función closeIt ():

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

Usando jQuery y jqModal, he intentado este tipo de cosas (usando un diálogo de confirmación personalizado):

$(window).beforeunload(function() {
        confirm(''new message: '' + this.href + '' !'', this.href);
        return false;
    });

que tampoco funciona, parece que no puedo enlazar con el evento beforeunload.

Answer 1

¿Qué hay de usar la versión especializada del comando "bind" one ". Una vez que el controlador de eventos se ejecuta la primera vez, se elimina automáticamente como un controlador de eventos.

$(window).one("beforeunload", BeforeUnload);

Answer 2

1) Usar en antes de descargar, no en descargar.

2) Lo importante es evitar ejecutar una declaración de retorno. No quiero decir, con esto, evitar regresar de su manejador. Devuelve todo bien, pero lo hace asegurándose de que llega al final de la función y NO ejecuta una instrucción de devolución. En estas condiciones, el diálogo estándar incorporado no se produce.

3) Puede, si usa en antes de descargar, ejecutar una llamada ajax en su controlador de descarga para descargar en el servidor, pero debe ser sincrónica, y debe esperar y manejar la respuesta en su controlador de carga antes de la descarga (aún respetando Condición (2) arriba). Hago esto y funciona bien. Si realiza una llamada ajax sincrónica, todo se detiene hasta que la respuesta vuelve. Si realiza una asincrónica, piensa que no le importa la respuesta del servidor, la descarga de la página continúa y su llamada ajax se interrumpe por este proceso, incluido un script remoto si se está ejecutando.

Answer 3

Esto no se puede hacer en Chrome ahora para evitar el envío de .com/questions/37782104/… Consulte .com/questions/37782104/… para obtener más detalles.

Answer 4

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.

Answer 5

Me enfrenté al mismo problema, estaba bien para obtener su propio cuadro de diálogo con mi mensaje, pero el problema que enfrenté fue: 1) Estaba dando un mensaje en todas las navegaciones Lo quiero solo para un clic cercano. 2) con mi propio mensaje de confirmación, si el usuario selecciona cancelar, aún muestra el cuadro de diálogo predeterminado del navegador.

A continuación se encuentra el código de soluciones que encontré, que escribí en mi página maestra.

function closeMe(evt) {
    if (typeof evt == ''undefined'') {
        evt = window.event; }
    if (evt && evt.clientX >= (window.event.screenX - 150) &&
        evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}
window.onbeforeunload = closeMe;

Answer 6

No puede modificar el diálogo predeterminado para una onbeforeunload , por lo que su mejor onbeforeunload es trabajar con él.

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

Aquí hay una referencia a esto de Microsoft:

Cuando se asigna una cadena 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 la cadena que se le asignó. 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 se llama onbeforeunload , tomará el valor de retorno del controlador como window.event.returnValue .
2. Luego analizará el valor de retorno como una cadena (a menos que sea nulo).
3. Como false se analiza como una cadena, se abrirá el cuadro de diálogo, que luego pasará un true / false apropiado.

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

Notas adicionales sobre jQuery:

• Configurar el evento en jQuery puede ser problemático, ya que esto permite que también onbeforeunload otros eventos antes de la onbeforeunload . Si solo deseas que se produzca tu evento de descarga, me limitaré a usar JavaScript simple para ello.

• jQuery no tiene un acceso directo para onbeforeunload de onbeforeunload por lo que tendría que usar la sintaxis de bind genérica.

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

Edición 09/04/2018 : los mensajes personalizados en los cuadros de diálogo antes de la descarga están en desuso desde chrome-51 (cf: nota de publicación )

Answer 7

Owen tiene razón. Y, la razón detrás de esto es la seguridad. Evitar que una página se descargue es útil en formularios web, pero puede ser fácilmente explotado por un sitio malicioso para engañar al usuario para que permanezca en una página. Es por eso que los navegadores web implementan el mensaje estándar y tienen este mecanismo para insertar texto personalizado.

Answer 8

Puede detectar qué botón (ok o cancelar) presionado por el usuario, porque la función de descarga solo se activa cuando el usuario elige abandonar la página. Aunque en esta función, las posibilidades son limitadas, porque el DOM se está contrayendo. Puede ejecutar javascript, pero el POST ajax no hace nada, por lo tanto, no puede usar este método para el cierre de sesión automático. Pero hay una solución para eso. El window.open (''logout.php'') ejecutado en la función onunload, por lo que el usuario cerró la sesión con una nueva ventana de apertura.

function onunload = (){
    window.open(''logout.php'');
}

Este código se llama cuando el usuario abandona la página o cierra la ventana activa y el usuario cierra la sesión con ''logout.php''. La nueva ventana se cierra inmediatamente cuando el inicio de sesión php consiste en código:

window.close();

Answer 9

Si bien no hay nada que puedas hacer con respecto al cuadro en algunas circunstancias, puedes interceptar a alguien haciendo clic en un enlace. Para mí, este esfuerzo valió la pena en 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.'';
    }
};

Podría adjuntar a otro evento y filtrar más sobre qué tipo de anclaje 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é que compartiría esto para aquellos que quieren esta solución.

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

Answer 10

Trate de hacer una return; En lugar de un mensaje ... esto funciona para la mayoría de los navegadores. (Esto solo previene los regalos del dialogo)

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}

Answer 11

Tuve este mismo problema y me estaba volviendo loco. Quería deshacerme completamente de la ventana emergente porque no quería advertir al usuario, simplemente llevarlos de un formulario a una página nueva. Probé las respuestas anteriores y no pude hacer que ninguna funcionara.

Finalmente, obtuve esto para ignorar la ventana emergente predeterminada de Firefox, con la ayuda de este sitio: http://code-maven.com/prevent-leaving-the-page-using-plain-javascript . Se agrega antes de redirigir la ventana:

window.onbeforeunload = function() {
    if (data_needs_saving()) {
         return "";
    } else {
         return "";
    }
};
window.location.href = ''www.redirect here'';

Answer 12

 <script type="text/javascript">
        window.onbeforeunload = function(evt) {
            var message = ''Are you sure you want to leave?'';
            if (typeof evt == ''undefined'') {
                evt = window.event;
            }       
            if (evt) {
                evt.returnValue = message;
            }
            return message;
        } 
    </script>

Consulte de http://www.codeprojectdownload.com