JavaScript antes de salir de la página

234

Quiero hacer una confirmación antes de que el usuario abandone la página. Si dice que está bien, redirigirá a una nueva página o cancelará la partida. Traté de hacerlo con onunload

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

¿Pero se confirma después de que la página ya está cerrada? ¿Cómo hacerlo correctamente?

¿Sería aún mejor si alguien muestra cómo hacerlo con jQuery?

javascript jquery

— kd7
fuente

1

ja, ja, ja ... Sí, eso es correcto ... pero afortunadamente no es mi sitio ... mi cliente me pide que lo haga de su lado

— kd7

25

Sí, pero estoy muy feliz de ver esas alertas cuando estoy a punto de salir de una página de Gmail no guardada.

— Etdashou

Tenga en cuenta que en Firefox 4+ solo se muestra un mensaje predeterminado en lugar de su mensaje personalizado developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes

— baptx

44

Posible duplicado de Avisar al usuario antes de abandonar la página web con cambios no guardados

— Wasim A.

352

onunload(o onbeforeunload) no puede redirigir al usuario a otra página. Esto es por razones de seguridad.

Si desea mostrar un aviso antes de que el usuario abandone la página, use onbeforeunload:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

O con jQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

Esto solo le preguntará al usuario si desea abandonar la página o no, no puede redirigirlos si selecciona permanecer en la página. Si eligen irse, el navegador irá a donde le dijeron que fuera.

Puedes onunloadhacer cosas antes de que la página se descargue, pero no puedes redirigir desde allí (Chrome 14+ bloquea las alertas dentro onunload):

window.onunload = function() {
    alert('Bye.');
}

O con jQuery:

$(window).unload(function(){
  alert('Bye.');
});

— Cohete Hazmat
fuente

12

@Joseph: cuando devuelve una cadena de onbeforeunload, el navegador coloca esa cadena en su propio cuadro de confirmación. Usar confirmes inútil en , onunloady onbeforeunloadporque solo el navegador puede controlar dónde va, no tú. Echa un vistazo a esta demostración: jsfiddle.net/3kvAC

— Rocket Hazmat

77

Solo una nota, si desea mostrar un mensaje condicionalmente onbeforeunload, return falsehará que el navegador muestre "falso" en un cuadro de diálogo. Debe hacerlo return undefinedsi desea dejar que la ventana se cierre sin alerta de usuario.

— Dan Fitch

55

@ Adam: Firefox decidió no permitir la personalización de ese mensaje. Eso es parte del navegador, por lo que no puede anular ese comportamiento. Otros navegadores también pueden eliminar la posibilidad de personalizar el mensaje. Ver: developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

— Rocket Hazmat

8

@RocketHazmat Chrome también lo ha hecho. Ahora solo dice: ¿Quieres abandonar este sitio? Los cambios que realizó no se pueden guardar.

— programmer5000

66

@ programmer5000 Es bueno porque algunos sitios web maliciosos pueden mostrar algunas advertencias inútiles (por ejemplo, "No puedes irte sin dar tu información bancaria")

— Naman

34

Este código cuando también detecta que el estado del formulario cambió o no.

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Puede Google JQuery Form Serialize función, esto recopilará todas las entradas de formulario y guardarlo en la matriz. Supongo que esta explicación es suficiente :)

— Wasim A.
fuente

alguna idea de por qué esto no funcionaría? ¿Podría ser sobrescrito por otras funciones js / jquery plugins? Estoy ejecutando una aplicación webrtc y me gustaría "cerrar" algunas cosas cuando el cliente cierra la ventana, por lo tanto, es necesario manejar el cierre de la ventana.

— Hola

1

esto puede ser sobrescrito por cualquier otro complemento, etc., principalmente el desarrollador cometió un error con el selector, si tiene dudas sobre la sobrescritura, coloque su código jquery antes de cerrar la etiqueta </body>.

— Wasim A.

Sí ... si tiene algún código JS que oculta o deshabilita los campos de entrada después de que se haya cargado la página, cuando realice la verificación para comparar los campos ocultos / deshabilitados no se serializarán. El cheque fallará, por supuesto. ;) Existe esta solución alternativa: stackoverflow.com/a/4748748/114029

— Leniel Maccaferri

Por cierto ... hay una mejor manera aquí: stackoverflow.com/q/16322042/114029

— Leniel Maccaferri

1

Cabe señalar que esto también generará una advertencia al presionar el botón Enviar. uno podría serializar el formulario nuevamente al hacer clic en el botón enviar para evitar eso.

— Adam

19

Esto alertará al salir de la página actual

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>

— Ajit Singh
fuente

14

Esto es lo que hice para mostrar el mensaje de confirmación justo cuando tengo datos no guardados

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

devolver "indefinido" deshabilitará la confirmación

Nota: devolver "nulo" no funcionará con IE

También puede usar "indefinido" para deshabilitar la confirmación

window.onbeforeunload = undefined;

— Mina Matta
fuente

11

Para tener un popop con Chrome 14+, debes hacer lo siguiente:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

Se le preguntará al usuario si quiere quedarse o irse.

— David Bélanger
fuente

¿Alguna idea de por qué esto no funciona? Estoy usando Chrome (última versión) junto con un conjunto de complementos de jquery, pero no recibo ninguna alerta cuando cierro la ventana.

— Hey

@hey ¿Por qué el voto negativo? Está funcionando ... Debes asegurarte de que esté fuera del jQuery(document)y sugiero que lo coloques justo después de cargar todos tus complementos. Además, este fragmento no hace ninguna alerta ... es solo una demostración con return.

— David Bélanger

7

Puede usar el siguiente one-liner para preguntar siempre al usuario antes de abandonar la página.

window.onbeforeunload = s => "";

Para preguntarle al usuario cuándo se ha modificado algo en la página, consulte esta respuesta .

— spencer.sm
fuente

¿esto también se activa si actualizo la página o simplemente salgo?

— Si8

Sí, se disparará al actualizar o salir.

— spencer.sm

¿Hay alguna forma de saber cuándo se actualiza y cuándo es la primera vez?

— Si8

Cuando un usuario llega a la página por primera vez en lugar de que el usuario actualice la página.

— Si8

Oh no. No se activará cuando un usuario acceda a la página por primera vez. Solo al cerrar o cambiar páginas o al actualizar.

— spencer.sm

4

Normalmente desea mostrar este mensaje, cuando el usuario ha realizado cambios en un formulario, pero no se guardan.

Tome este enfoque para mostrar un mensaje, solo cuando el usuario haya cambiado algo

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}

— Simon Franzen
fuente

3

<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() {
    return "Write something clever here...";
}
</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

— Emir Mamashov
fuente

2

La mayoría de las soluciones aquí no funcionaron para mí, así que utilicé la que se encuentra aquí

También agregué una variable para permitir el cuadro de confirmación o no

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});

— Raj Sharma
fuente

1

Solo un poco más útil, habilita y deshabilita

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');

— l2aelba
fuente