2010-05-18 11 views
22

Cuando cierro la página en algún navegador, quiero que aparezca un cuadro de mensaje y preguntarme si realmente quiero cerrar la página o no, con dos botones y si hago clic en No, entonces este la pestaña no se cerraráSolicitar confirmación al cerrar una pestaña

¿Cómo puedo hacer eso?

+1

posible duplicado de [Llamar a algunos JavaScript cuando el usuario cierra una ventana (emergente)] (http://stackoverflow.com/questions/1333833/call-some-javascript-when-the-user-closes- a-popup-window) –

+0

posible dupli cate de [javascript para verificar cuando la ventana del navegador está cerca] (http://stackoverflow.com/questions/805463/javascript-to-check-when-the-browser-window-is-close) – CMS

Respuesta

41

Es necesario escuchar en el no -estándarse beforeunload evento. Esto es compatible con casi todos los navegadores, se espera de Opera, que se sabe que cumple estrictamente con los estándares W3C.

Aquí está un ejemplo patada de salida:

window.onbeforeunload = function() { 
    return "Hey, you're leaving the site. Bye!"; 
}; 

Este mensaje se mostrará en una especie de diálogo de confirmación. Este mensaje se mostrará a la derecha antes de el cliente descarga la página. Puede ser un navegador cerrado, pero que también puede ser una acción de navegación simple, como hacer clic en un enlace o enviar un formulario en la página.

Lo más probable es que también desee desactivarlo (solo establecer en null) cada vez que se hace clic en un enlace interno o se envía un formulario interno. Usted no quiere molestar a los usuarios finales con un comportamiento poco intuitivo. Puede hacerlo escuchando en el evento click de los enlaces deseados y el evento submit de los formularios deseados. jQuery puede ser de gran ayuda aquí, ya que hace que, en forma crossbrowsercompatible de manera que no es necesario escribir> 20 líneas de código JS para esto:

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 
    window.onbeforeunload = function() { 
     return "You're leaving the site."; 
    }; 
    $(document).ready(function() { 
     $('a[rel!=ext]').click(function() { window.onbeforeunload = null; }); 
     $('form').submit(function() { window.onbeforeunload = null; }); 
    }); 
</script> 

Sólo es necesario dar a todos los enlaces externos el estándar de facto atributo rel="ext" para indicar que esos son enlaces externos.

<a href="http://google.com" rel="ext">Google</a> 
+0

No tiene para desconectar la función 'onbeforeunload' si no desea mostrar el cuadro de alerta. Simplemente deje que la función no devuelva nada y el navegador continuará como se esperaba (cerrando la ventana, retrocediendo en la historia, etc.). –

+0

@Marcel: Esa es de hecho otra forma de deshabilitar la función. Sin embargo, esto requiere un cambio global y me gustaría evitarlos tanto como sea posible. – BalusC

+0

Si no se puede agregar el atributo rel = "ext", también puede comparar la ubicación href del enlace a su página actual. $ ('a [href * = "' + window.location.host + '"]') –

5

utilizar el evento onbeforeunload

window.onbeforeunload = function(){ 
    return "Are you sure you want to close the window?"; 
} 

Esto mostrará un cuadro de mensaje en el que el usuario puede elegir si desea o no cerrar la ventana.

Tenga en cuenta que esto no es compatible con Opera.

7

onbeforeunload incendios antes onunload.

No puede cancelar el evento en onunload. onbeforeunload permite devolver una cadena de eventos (por ejemplo, window.onbeforeunload = function() {return "really leave now?"}), y el navegador le preguntará al usuario si quiere abandonar su página. La página no tiene voz para detener el evento si se hace clic en "Sí" (así es como debería ser) demasiado en mi opinión)

puntos generales:.

  • alert, prompt y confirm no están permitidos en cualquiera de los eventos
  • Tampoco se admite en Opera..

ADVERTENCIA: En IE6/7, al menos (y, posiblemente, pero no IE8 FF/cromo, etc.) y onbeforeunloadonunload se activan cuando anclas/javascript enlaces se hace clic en. Algunos ejemplos:

  • <a href="#myanchor">trigger unload!</a>
  • <a href="javascript: alert('message!')">trigger unload!</a>

(MSDN es tan buena fuente como cualquier otro, considerando que es no estándar y que Firefox/Chrome/Safari parece en gran medida han copiado la aplicación de IE.)

Cuestiones relacionadas