2011-11-04 11 views
32

¿Cómo puedo capturar el evento de recarga de página?¿Cómo puedo detectar una actualización de página usando jquery?

Tengo un sistema de mensajes que pierde toda su entrada cuando el usuario actualiza la página. Quiero usar ajax para volver a poblar, de ahí mi necesidad de detectar cuándo la página se ha actualizado/recargado.

+0

Puede encontrar una solución aquí: http://stackoverflow.com/questions/3699357/event-calling-before-page-unload – Dave

Respuesta

33
$('body').bind('beforeunload',function(){ 
    //do something 
}); 

Pero esto suele guardar cualquier información para más adelante, a menos que se planea en el ahorro que en una cookie en alguna parte (o el almacenamiento local) y el evento unload no siempre fuego en todos los navegadores.


Ejemplo: http://jsfiddle.net/maniator/qpK7Y/

Código:

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

    //save info somewhere 

    return 'are you sure you want to leave?'; 

}); 
+11

Para el registro, se disparará también en la página. – scumah

+0

también puede guardar información de la página usando este método. simplemente obtenga todos los valores ingresados ​​de entrada, cree una cadena de datos y agregue window.location.href = "pagename? datastring" en la función beforeunload –

+2

¿Debería ser 'on' y' download'? http://api.jquery.com/unload/ - también, ¿detecta esto F5 en Firefox? –

8

Todo el código está del lado del cliente, espero que bien han encontrado útil:

Lo primero que hay 3 funciones Utilizaremos :

function setCookie(c_name, value, exdays) { 
      var exdate = new Date(); 
      exdate.setDate(exdate.getDate() + exdays); 
      var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString()); 
      document.cookie = c_name + "=" + c_value; 
     } 

    function getCookie(c_name) { 
     var i, x, y, ARRcookies = document.cookie.split(";"); 
     for (i = 0; i < ARRcookies.length; i++) { 
      x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")); 
      y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1); 
      x = x.replace(/^\s+|\s+$/g, ""); 
      if (x == c_name) { 
       return unescape(y); 
      } 
     } 
    } 

    function DeleteCookie(name) { 
      document.cookie = name + '=; expires=Thu, 01-Jan-70 00:00:01 GMT;'; 
     } 

Ahora vamos a comenzar con la carga de la página:

$(window).load(function() { 
//if IsRefresh cookie exists 
var IsRefresh = getCookie("IsRefresh"); 
if (IsRefresh != null && IsRefresh != "") { 
    //cookie exists then you refreshed this page(F5, reload button or right click and reload) 
    //SOME CODE 
    DeleteCookie("IsRefresh"); 
} 
else { 
    //cookie doesnt exists then you landed on this page 
    //SOME CODE 
    setCookie("IsRefresh", "true", 1); 
} 
}) 
+0

Cuando probé esto, disparó el código de prueba para la primera carga cada dos por tres. –

11

si quieres bookkeep alguna variable antes de actualización de la página

$(window).on('beforeunload', function(){ 
    // your logic here 
}); 

si desea o cargar algunos base de contenidos de alguna condición

$(window).on('load', function(){ 
    // your logic here`enter code here` 
}); 
0

Hay dos eventos en el lado del cliente como se indica a continuación.

1. window.onbeforeunload (llamadas en el navegador/pestaña Cerrar & carga de la página)

2. window.onload (llamadas en la página de carga)

En el lado del servidor

public JsonResult TestAjax(string IsRefresh) 
    { 
     JsonResult result = new JsonResult(); 
     return result = Json("Called", JsonRequestBehavior.AllowGet); 
    } 

de lado cliente

<script type="text/javascript"> 
 
    window.onbeforeunload = function (e) { 
 
     
 
     $.ajax({ 
 
      type: 'GET', 
 
      async: false, 
 
      url: '/Home/TestAjax', 
 
      data: { IsRefresh: 'Close' } 
 
     }); 
 
    }; 
 

 
    window.onload = function (e) { 
 

 
     $.ajax({ 
 
      type: 'GET', 
 
      async: false, 
 
      url: '/Home/TestAjax', 
 
      data: {IsRefresh:'Load'} 
 
     }); 
 
    }; 
 
</script>

en el navegador/Tab Cerrar: si el usuario cierra el/pestaña del navegador, luego window.onbeforeunload se disparará y el valor IsRefresh en el lado del servidor será "Cerca".

En Actualizar/Recargar/F5: Si va a actualizar la página de usuario, primero window.onbeforeunload se disparará con valor IsRefresh = "Cerrar" y luego se dispara con window.onload value = "carga" IsRefresh, por lo ahora puede determinar finalmente que su página es refrescante.

Cuestiones relacionadas