Comment savoir navigateur, le temps d'inactivité?

Ici est pur JavaScript moyen de suivre les temps d'inactivité et quand il atteindre la limite de faire une certaine action:

JS:

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

CSS:

#SecondsUntilExpire { background-color: yellow; }

HTML:

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

Ce code va attendre 60 secondes avant l'affichage d'alerte et de redirection, et toute action "réinitialiser" le comte de la souris sur le, déplacement de la souris ou appuyez sur une touche.

Il faut que le cross-navigateur que possible, et avant droite. Il a également en charge l'affichage du temps restant, si vous ajoutez un élément de votre page avec l'ID de SecondsUntilExpire.

Le code ci-dessus devrait fonctionner correctement, a cependant plusieurs inconvénients, par exemple, il ne permet pas à d'autres événements à exécuter et ne prend pas en charge multiplier les onglets. Refactorisation de code qui incluent à la fois de ces est la suivante: (pas besoin de modifier le 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";
}
}

La refonte du code ci-dessus est d'utiliser le stockage local de garder une trace de quand le compteur a été la dernière remise à zéro, et aussi le réinitialiser sur chaque nouvel onglet qui s'ouvre qui contient le code, puis le compteur sera le même pour tous les onglets, et la réinitialisation de l'un entraînera la remise à zéro de tous les onglets. Depuis Pile Extraits ne permettent pas de local de stockage, il est inutile d'en être l'hôte, donc je l'ai fait du violon:
http://jsfiddle.net/yahavbr/gpvqa0fj/3/

Trop tard pour répondre, mais cela peut aider quelqu'un d'écrire propre et pratique. C'est une solution idéale lorsque vous n'avez pas besoin de temps d'affichage de gauche pour la session expire. Bon d'ignorer setInterval(), qui ne cesse de l'exécution du script par le biais de l'application en cours d'exécution en temps.

JS:

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

HTML:

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

J'avais besoin de quelque chose de similaire et a créé ce :https://github.com/harunurhan/idlejs

Simple, configurable et puissant dans un sens, sans aucune dépendance. Voici un exemple.

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

Vous pouvez également utiliser événement personnalisé cibles et les événements

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

(Écrit en caractères d'imprimerie et compilé es5)