web-dev-qa-db-fra.com

Comment détecter une actualisation de page à l'aide de jquery?

Comment capturer l'événement de rechargement de page?

J'ai un système de messagerie qui perd toutes ses entrées lorsque l'utilisateur actualise la page. Je veux utiliser ajax pour re-peupler, d'où mon besoin de détecter quand la page a été rafraîchie/rechargée.

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

Mais cela ne sauvegardera aucune information pour plus tard, à moins que vous ne prévoyiez de le faire dans un cookie (ou un stockage local) et que l'événement unload ne se déclenche pas toujours dans tous les navigateurs.

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

Code: 

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

     //save info somewhere

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

});
38
Neal

si vous voulez tenir une variable avant d'actualiser la page

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

si vous voulez o charger une base de contenu à une condition

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

Tout le code est du côté client, j'espère que cela vous aidera:

La première chose à faire est d'utiliser 3 fonctions:

    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;';
        }

Nous allons maintenant commencer par le chargement de la page:

$(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);
 }
})
9
Arrabi

Il existe deux événements côté client, comme indiqué ci-dessous.

1. window.onbeforeunload (appels sur le navigateur/onglet Fermer et chargement de la page)

2. window.onload (appels sur le chargement de page)

Côté serveur

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

Côté client

 <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>

Sur le navigateur/l'onglet Fermer: Si l'utilisateur ferme le navigateur/l'onglet, window.onbeforeunload se déclenchera et la valeur IsRefresh côté serveur sera "Fermer".

Sur Actualiser/Recharger/F5: Si l'utilisateur actualise la page, la première fenêtre.onbeforeunload se déclenchera avec IsRefresh value = "Close", puis window.onload se déclenchera avec IsRefresh value = "Load". Maintenant, vous pouvez enfin déterminer que votre page est rafraîchissante.

0
Umar Shafeeq