Как определить обновление страницы с помощью jquery? - PullRequest
Новая
       60

Как определить обновление страницы с помощью jquery?

38 голосов
/ 04 ноября 2011

Как мне перехватить событие перезагрузки страницы?

У меня есть система обмена сообщениями, которая теряет все свои данные, когда пользователь обновляет страницу.Я хочу использовать ajax для повторного заполнения, поэтому мне нужно определить, когда страница была обновлена ​​/ перезагружена.

Ответы [ 4 ]

39 голосов
/ 04 ноября 2011 
$('body').bind('beforeunload',function(){
   //do something
});

Но это не сохранит какую-либо информацию на потом, если только вы не планировали сохранить ее в файле cookie (или в локальном хранилище), а событие unload не всегда срабатывает во всех браузерах.

Пример: http://jsfiddle.net/maniator/qpK7Y/

Код: 

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

     //save info somewhere

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

});
15 голосов
/ 20 мая 2014

, если вы хотите сохранить некоторую переменную перед обновлением страницы 

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

, если вы хотите o загрузить некоторую базу контента при каком-либо условии 

$(window).on('load', function(){
    // your logic here`enter code here`
});
9 голосов
/ 27 декабря 2011

Весь код на стороне клиента. Надеюсь, вам это пригодится:

Во-первых, мы будем использовать 3 функции: 

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

Теперь начнем с загрузки страницы: 

$(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 голосов
/ 29 июня 2016

На стороне клиента есть два события, как показано ниже.

1. window.onbeforeunload (вызовы в браузере / вкладке «Закрыть и загрузка страницы»)

2. window.onload (вызывает загрузку страницы)

На стороне сервера 

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

На стороне клиента 

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

В браузере / закрытии вкладки: если пользователь закроет браузер / вкладку, то сработает window.onbeforeunload и значение IsRefresh на стороне сервера будет равно «Закрыть».

При обновлении / перезагрузке / F5: Если пользователь обновит страницу, сначала будет запущено окно window.onbeforeunload со значением IsRefresh = «Закрыть», а затем будет запущено окно window.onload со значением IsRefresh = «Загрузка», так что теперь вы можете наконец определить, что ваша страница обновляется. *

...