Перенаправить пользователя после 60 секунд простоя / бездействия?

Как я могу использовать JavaScript на моем сайте, чтобы перенаправить пользователя на /logout страницу после 60 секунд бездействия?

Я знаю, что установить таймер или использовать мета-тег обновления просто: но я хочу перенаправить только неактивных пользователей, а не нарушать чей-то активный сеанс / использование.

Возможно ли это с помощью JavaScript?


person simon    schedule 12.04.2011    source источник
comment
Не уверен, но я думаю, что вы можете привязать каждое действие к функции, которая сбрасывает таймер ...   -  person    schedule 12.04.2011
comment
Что неактивно определяется как? Мышь не двигается? Не нажимаете клавиши? Что, если они читают что-то за 60 секунд и не нажимают на мышь и клавиатуру во время чтения?   -  person ctcherry    schedule 12.04.2011
comment
Что, если пользователь потеряет сознание перед клавиатурой, разве не стоит уведомить больницу? Отличная функция пользовательского интерфейса, я говорю;)   -  person jallmer    schedule 12.04.2011


Ответы (4)


Я полагаю, вы ищете что-то вроде этого:
http://paulirish.com/2009/jquery-idletimer-plugin/

Если бы вы кодировали это самостоятельно, вам нужно было бы захватывать события мыши и клавиатуры и перезапускать таймер после любого из этих событий. Если таймер когда-либо достигает порога или отсчитывает до 0 от порога, вы можете сбросить URL-адрес страницы.

person jallmer    schedule 12.04.2011

Вместо использования плагина с ненужными килобайтами все, что вам нужно, это простая функция, подобная этой
(см. Объяснение в комментариях):

<script>
(function() {

    const idleDurationSecs = 60;    // X number of seconds
    const redirectUrl = '/logout';  // Redirect idle users to this URL
    let idleTimeout; // variable to hold the timeout, do not modify

    const resetIdleTimeout = function() {

        // Clears the existing timeout
        if(idleTimeout) clearTimeout(idleTimeout);

        // Set a new idle timeout to load the redirectUrl after idleDurationSecs
        idleTimeout = setTimeout(() => location.href = redirectUrl, idleDurationSecs * 1000);
    };

    // Init on page load
    resetIdleTimeout();

    // Reset the idle timeout on any of the events listed below
    ['click', 'touchstart', 'mousemove'].forEach(evt => 
        document.addEventListener(evt, resetIdleTimeout, false)
    );

})();
</script>

Если вы хотите перенаправить на домашнюю страницу (обычно /), измените '/logout' на '/':

    const redirectUrl = '/';  // Redirect idle users to the root directory

Если вы хотите перезагрузить / обновить текущую страницу, просто измените '/logout' в приведенном выше коде на location.href:

    const redirectUrl = location.href;  // Redirect idle users to the same page
person Samuel Liew♦    schedule 03.09.2018

Также существует более свежая версия плагина.

Он сможет запускать событие простоя для всего документа или отдельных элементов. Например, наведите указатель мыши на какой-либо элемент на x секунд, и он запустит событие. Другое событие запускается, когда пользователь снова становится активным.

Это событие простоя позволит вам перенаправить пользователя после заданного времени бездействия.

Поддерживаемое действие: mousemove keydown wheel DOMMouseScroll mousewheel mousedown touchstart touchmove MSPointerDown MSPointerMove

https://github.com/thorst/jquery-idletimer

person Firze    schedule 08.01.2015

Установите таймер, когда пользователь входит в систему, щелкает что-либо или перемещает мышь. Вы можете поддерживать localStorage, sessionStorage или любую глобальную переменную, чтобы отслеживать время простоя.

let obj_date = new Date();
let miliseconds = obj_date.getTime(); // Returns the number of miliseconds since 1970/01/01
localStorage.setItem("idle_time",miliseconds); 

После этого продолжайте вызывать следующую функцию изнутри, например setInterval() каждые 10, 20, 30 или 60 секунд (по вашему выбору), чтобы проверить, истек ли этот срок. Или вы можете вызывать функцию всякий раз, когда пользователь пытается взаимодействовать, чтобы проверить, не превысило ли его время простоя пороговое значение.

function check_if_session_expired() {
  let max_idle_minutes=1;
  let miliseconds_now = obj_date.getTime();
  let get_idle_time_in_miliseconds = localStorage.getItem("idle_time");
  let one_minute_to_milisecond = 1000 * 60;
  if ((Math.round(miliseconds_now / one_minute_to_milisecond) - Math.round(get_idle_time_in_miliseconds / one_minute_to_milisecond)) >= max_idle_minutes) {
    console.log("expired");
    //clear sessionStorage/localStorage if you want
    localStorage.removeItem("idle_time");
    //end the session and redirect the user to logout page
    window.location.replace('example.com/logout');
  } else {
    localStorage.setItem("idle_time",miliseconds_now);
  }
}

Вы можете использовать файлы cookie, чтобы сделать то же самое.

person Plabon Dutta    schedule 22.04.2020