javascript - chrome - title html español

¿Cómo saber el tiempo de inactividad del navegador?

Question

¿Cómo puedo seguir el tiempo de inactividad del navegador? Estoy usando IE8.

No estoy usando ninguna administración de sesión y no quiero manejarlo en el lado del servidor.

Answer 1

Demasiado tarde para responder, pero esto podría ayudar a alguien a escribir una solución limpia y práctica. Esta es una solución ideal, cuando no necesita mostrar el tiempo restante para que caduque la sesión. Es bueno ignorar setInterval() , que continúa ejecutando el script durante todo el tiempo de ejecución de la aplicación.

    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 2

Espero que esto sea lo que está buscando jquery-idletimer-plugin

Answer 3

Esta es la forma pura de JavaScript para rastrear el tiempo de inactividad y cuando alcanza cierto límite, haga algo de acción:

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.

Este código esperará 60 segundos antes de mostrar la alerta y la redirección, y cualquier acción "reiniciará" la cuenta: haga clic con el mouse, mueva el mouse o presione la tecla.

Debe ser lo más transversal posible al navegador, y sencillo. También admite mostrar el tiempo restante, si agrega un elemento a su página con el ID de SecondsUntilExpire .

El código anterior debería funcionar bien, sin embargo, tiene varios inconvenientes, por ejemplo, no permite que se ejecuten otros eventos y no admite pestañas múltiples. El código refactorizado que incluye estos dos es el siguiente: (no es necesario cambiar 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";
    }
}

El código refactorizado anterior está utilizando el almacenamiento local para realizar un seguimiento de cuándo se restableció por última vez el contador, y también restablecerlo en cada nueva pestaña que se abre y que contiene el código, entonces el contador será el mismo para todas las pestañas y se restablecerá en una. resultará en el restablecimiento de todas las pestañas. Como los fragmentos de pila no permiten el almacenamiento local, no tiene sentido alojarlos allí, así que he creado un violín: http://jsfiddle.net/yahavbr/gpvqa0fj/3/

Answer 4

Este es un enfoque que utiliza jquery, ya que necesitaba preservar los eventos de teclado existentes en el documento.

También necesitaba hacer diferentes cosas en diferentes tiempos de inactividad, así que lo envolví en una función

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

Answer 5

Necesitaba algo similar y creé esto: https://github.com/harunurhan/idlejs

Es simple, configurable y potente de una manera, sin dependencias. Aquí hay un ejemplo.

import { Idle } from ''idlejs/dist'';

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

También puede utilizar objetivos de eventos personalizados y eventos

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

(Escrito en mecanografiado y compilado a es5)