Как узнать браузер простой?

Question

Как я могу отслеживать время простоя браузера? Я использую IE8.

Я не использую управление сессиями и не хочу обрабатывать его на стороне сервера.

Answer 1

Вот чистый способ JavaScript для отслеживания времени простоя, и когда он достигает определенного предела, выполните какое-то действие:

var IDLE_TIMEOUT = 60; //seconds
var _idleSecondsTimer = null;
var _idleSecondsCounter = 0;

document.onclick = function() {
    _idleSecondsCounter = 0;
};

document.onmousemove = function() {
    _idleSecondsCounter = 0;
};

document.onkeypress = function() {
    _idleSecondsCounter = 0;
};

_idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {
     _idleSecondsCounter++;
     var oPanel = document.getElementById("SecondsUntilExpire");
     if (oPanel)
         oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        window.clearInterval(_idleSecondsTimer);
        alert("Time expired!");
        document.location.href = "logout.html";
    }
}

#SecondsUntilExpire { background-color: yellow; }

You will be auto logged out in <span id="SecondsUntilExpire"></span> seconds.

Этот код будет ждать 60 секунд, прежде чем отобразить предупреждение и перенаправление, и любое действие "сбросит" счетчик - щелчок мыши, перемещение мыши илинажмите клавишу.

Он должен быть как можно более кроссбраузерным и прямым.Также поддерживается отображение оставшегося времени, если вы добавляете элемент на страницу с идентификатором SecondsUntilExpire.

Приведенный выше код должен работать нормально, однако имеет несколько недостатков, например, он не позволяет запускать какие-либо другие событияи не поддерживает умножение вкладок.Реорганизованный код, включающий оба эти кода, следующий: (нет необходимости изменять HTML)

var IDLE_TIMEOUT = 60; //seconds
var _localStorageKey = 'global_countdown_last_reset_timestamp';
var _idleSecondsTimer = null;
var _lastResetTimeStamp = (new Date()).getTime();
var _localStorage = null;

AttachEvent(document, 'click', ResetTime);
AttachEvent(document, 'mousemove', ResetTime);
AttachEvent(document, 'keypress', ResetTime);
AttachEvent(window, 'load', ResetTime);

try {
    _localStorage = window.localStorage;
}
catch (ex) {
}

_idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);

function GetLastResetTimeStamp() {
    var lastResetTimeStamp = 0;
    if (_localStorage) {
        lastResetTimeStamp = parseInt(_localStorage[_localStorageKey], 10);
        if (isNaN(lastResetTimeStamp) || lastResetTimeStamp < 0)
            lastResetTimeStamp = (new Date()).getTime();
    } else {
        lastResetTimeStamp = _lastResetTimeStamp;
    }

    return lastResetTimeStamp;
}

function SetLastResetTimeStamp(timeStamp) {
    if (_localStorage) {
        _localStorage[_localStorageKey] = timeStamp;
    } else {
        _lastResetTimeStamp = timeStamp;
    }
}

function ResetTime() {
    SetLastResetTimeStamp((new Date()).getTime());
}

function AttachEvent(element, eventName, eventHandler) {
    if (element.addEventListener) {
        element.addEventListener(eventName, eventHandler, false);
        return true;
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, eventHandler);
        return true;
    } else {
        //nothing to do, browser too old or non standard anyway
        return false;
    }
}

function WriteProgress(msg) {
    var oPanel = document.getElementById("SecondsUntilExpire");
    if (oPanel)
         oPanel.innerHTML = msg;
    else if (console)
        console.log(msg);
}

function CheckIdleTime() {
    var currentTimeStamp = (new Date()).getTime();
    var lastResetTimeStamp = GetLastResetTimeStamp();
    var secondsDiff = Math.floor((currentTimeStamp - lastResetTimeStamp) / 1000);
    if (secondsDiff <= 0) {
        ResetTime();
        secondsDiff = 0;
    }
    WriteProgress((IDLE_TIMEOUT - secondsDiff) + "");
    if (secondsDiff >= IDLE_TIMEOUT) {
        window.clearInterval(_idleSecondsTimer);
        ResetTime();
        alert("Time expired!");
        document.location.href = "logout.html";
    }
}

Приведенный выше код с измененным кодом использует локальное хранилище для отслеживания последнего сброса счетчика, а также для его сброса.каждая новая открываемая вкладка содержит код, тогда счетчик будет одинаковым для всех вкладок, а сброс на одну приведет к сбросу всех вкладок.Поскольку фрагменты стека не допускают локального хранения, размещать его там бессмысленно, поэтому я сделал скрипку: http://jsfiddle.net/yahavbr/gpvqa0fj/3/

Answer 2

Слишком поздно для ответа, но это может помочь кому-то написать чистое и практичное решение. Это идеальное решение, когда вам не нужно отображать время, оставшееся до истечения сеанса. Хорошо игнорировать setInterval(), который продолжает выполнение скрипта в течение всего времени работы приложения.

    var inactivityTimeOut = 10 * 1000, //10 seconds
        inactivitySessionExpireTimeOut = '';

    setSessionExpireTimeOut();

    function setSessionExpireTimeOut () {
        'use strict';
        
        clearSessionExpireTimeout();
        inactivitySessionExpireTimeOut = setTimeout(function() {
            expireSessionIdleTime();
        }, inactivityTimeOut);
    }

    function expireSessionIdleTime () {
        'use strict';

        console.log('user inactive for ' + inactivityTimeOut + " seconds");
        console.log('session expired');
        alert('time expired');
        clearSessionExpireTimeout();
        document.location.href = "logout.html";
    }

    function clearSessionExpireTimeout () {
            'use strict';

            clearTimeout(inactivitySessionExpireTimeOut);
    }

Running example: Timeout alert will be popped up in 10 seconds

Answer 3

Надеюсь, это то, что вы ищете jquery-idletimer-plugin

Answer 4

Мне понадобилась похожая вещь, и я создал ее: https://github.com/harunurhan/idlejs

Это простой, настраиваемый и мощный способ, без каких-либо зависимостей. Вот пример.

import { Idle } from 'idlejs/dist';

// with predefined events on `document`
const idle = new Idle()
  .whenNotInteractive()
  .within(60)
  .do(() => console.log('IDLE'))
  .start();

Вы также можете использовать пользовательские цели и события

const idle = new Idle()
  .whenNot([{
    events: ['click', 'hover'],
    target: buttonEl,
  },
  {
    events: ['click', 'input'],
    target: inputEl,
  },
  ])
  .within(10)
  .do(() => called = true)
  .start();

(Написано в машинописи и скомпилировано в es5)

Answer 5

Вот подход, использующий jquery, поскольку мне нужно было сохранить существующие события клавиатуры в документе.

Мне также нужно было делать разные вещи в разное время простоя, поэтому я обернул его в функцию

var onIdle = function (timeOutSeconds,func){
    //Idle detection
    var idleTimeout;
    var activity=function() {
        clearTimeout(idleTimeout);
        console.log('to cleared');
        idleTimeout = setTimeout(func, timeOutSeconds * 1000);
    }
    $(document).on('mousedown mousemove keypress',activity);
    activity();
}
onIdle(60*60,function(){
    location.reload();
});
onIdle(30,function(){
    if(currentView!=='welcome'){
        loadView('welcome');
    }
});