2009-08-07 13 views
19

Tengo una aplicación de chat, quiero que cada vez que el usuario cierre accidentalmente o manualmente el navegador, reciba una alerta para que se puedan llevar a cabo varias operaciones de limpieza. Tengo más cosas que deseo usar antes del evento, pero quiero que se use para una página web en particular, ya que todas las demás páginas web también se llaman antes de la carga. Por favor ayudaAlerta cuando la ventana del navegador se cerró accidentalmente

Respuesta

22

Debemos evitar o indicar al usuario que al realizar estas acciones perderá sus datos.

  1. Haga clic en el botón de navegador atras.
  2. Haga clic en el botón de actualizar el navegador.
  3. Haga clic en el botón de cerrar para ubicar "browser".
  4. Haga clic en el botón del navegador hacia adelante.
  5. teclado stroke- Alt + F4 (Cerrar)
  6. teclado stroke- F5 (Actualizar)
  7. teclado stroke- CTRL +F5 (Actualizar) stroke-
  8. teclado Shift +F5 (Actualizar)
  9. Cambio de url
  10. O cualquier cosa que cause la devolución de datos que no sea su botón de envío particular.

Para explicar que he usado dos cuadros de texto, un botón de envío de Asp.net con id TestButton. Otros controles de devolución que he tomado son Otro botón asp.net, una casilla de verificación con la propiedad autopostback verdadero, una lista desplegable con propiedad autopostback verdadero. Ahora he usado todos estos controles de devolución de datos para mostrarle que también debemos mostrarle al usuario que los datos se pierden cuando el usuario realiza acciones en estos controles. Al enviar el botón, no mostraremos el mensaje, ya que tenemos que enviar los datos con esa acción de control. Aquí está el código de muestra. He configurado el método window.onbeforeunload en los controles.

<html > 
<head id="Head1"> 
    <title></title> 

    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

    <script type="text/javascript"> 
     $(function() 
     { 
      // Prevent accidental navigation away 
      $(':input').bind(
       'change', function() { setConfirmUnload(true); }); 
      $('.noprompt-required').click(
       function() { setConfirmUnload(false); }); 

      function setConfirmUnload(on) 
      { 
       window.onbeforeunload = on ? unloadMessage : null; 
      } 
      function unloadMessage() 
      { 
       return ('You have entered new data on this page. ' + 
         'If you navigate away from this page without ' + 
         'first saving your data, the changes will be lost.'); 
      } 

      window.onerror = UnspecifiedErrorHandler; 
      function UnspecifiedErrorHandler() 
      { 
       return true; 
      } 

     }); 

    </script> 

</head> 
<body> 
    <form id="form1" name="myForm" runat="server"> 
    <div> 
     First Name :<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> 
     <br /> 
     Last Name :<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br /> 
     <br /> 
     IsMarried :<asp:CheckBox ID="CheckBox1" runat="server" /><br /> 
     <br /> 
     <asp:Button runat="server" ID="TestButton" Text="Submit" CssClass="noprompt-required" /><br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <asp:Button runat="server" ID="AnotherPostbackButton" Text="AnotherPostbackButton" 
      /><br /> 
     <br /> 
     <asp:CheckBox runat="server" ID="CheckboxWhichCausePostback" Text="CheckboxWhichCausePostback" 
      AutoPostBack="true" /><br /> 
     <br /> 
     DropdownWhichCausePostback<asp:DropDownList runat="server" ID="DropdownWhichCausePostback" 
      AutoPostBack="true"> 
      <asp:ListItem Text="Text1"></asp:ListItem> 
      <asp:ListItem Text="Text2"></asp:ListItem> 
     </asp:DropDownList> 
     <br /> 
     <br /> 
    </div> 
    </form> 
</body> 

Por encima de que he utilizado:

$('.noprompt-required').click(function() { setConfirmUnload(false); }); 

Lo que he hecho en esta línea es que estoy llamando setConfirmUnload método y pasa como argumento falso que permitirá establecer el window.onbeforeunload en nulo. Entonces, lo que eso significa es que en cualquier control donde desee que no se le pida al usuario, dele ese control a la clase .noprompt-required y deje el otro como está.

+0

He votado a favor de esto, pero ... no funciona en IOS (iPad/iPhone), lo cual es una lástima. – Michael

+0

¡Muy buena idea y solución! – Aleeeeee

+0

Esta solución se desencadena incluso cuando el formulario se envía realmente. Es inutilizable –

7

puedes probar el casodescarga:

$(window).unload(function() { alert("Bye now!"); }); 

http://docs.jquery.com/Events/unload

supongo esta limpieza es de sólo el cliente. Sería interesante conocer la naturaleza de estas "limpiezas".

+2

"interesante conocer la naturaleza" de hecho. es mejor que no sean las cosas que necesita el host, porque no importa qué tipo de limpieza puedas forzar al descargar, no lo verás si el navegador se mata del administrador de tareas o si la PC del usuario se bloquea ... – jlarson

+0

Yo también estaba lo que implica que también puede ser necesaria cierta limpieza en el servidor. Algo que posiblemente podría manejarse en caso de que un navegador se mate desde el administrador de tareas. –

+0

Esto alertará al usuario, pero no hay nada que puedan hacer para regresar a la página. Creo que la palabra "accidentalmente" en su pregunta implica un tipo de alerta que SO utiliza. –

21

Esto no es realmente una cosa jQuery, utilizo estas funciones:

function setConfirmUnload(on) { 
    window.onbeforeunload = (on) ? unloadMessage : null; 
} 

function unloadMessage() { 
    return "Are you sure you want to leave this page"; 
} 

Entonces, en cualquier momento puede llamar

setConfirmUnload (verdadero) para permitir la confirmación o falso si desea les permite cerrar la pantalla sin una advertencia (si tiene un botón para cerrar, por ejemplo).

-1

Usted puede probar esto con ajax

$(window).unload(function() { alert("AJAX function to do required job"); }); 
Cuestiones relacionadas