如果用户当前在页面上处于活动状态,我如何使用JavaScript/jQuery进行检测？

Question

我需要在当前页面上检测用户何时处于非活动状态(不是单击或键入)超过30分钟.

我认为最好使用贴在身体标签上的事件blubbling,然后继续重置计时器30分钟,但我不确定如何创建它.

我有jQuery可用,虽然我不确定这有多少实际上会使用jQuery.

编辑:我更需要知道他们是否正在积极使用该网站,因此点击(更改字段或字段中的位置或选择复选框/无线电)或键入(在输入,textarea等).如果他们在另一个选项卡中或使用其他程序,那么我的假设是他们没有使用该网站,因此应该注销(出于安全原因).

编辑#2:所以每个人都清楚,这根本不是用于确定用户是否已登录,经过身份验证或其他任何内容.现在,如果用户在30分钟内没有发出页面请求,服务器会将用户注销.此功能可防止有人花费> 30分钟填写表单然后提交表单以发现他们尚未注销的时间.因此,这将与服务器站点结合使用,以确定用户是否处于非活动状态(不是单击或键入).基本上,交易是在闲置25分钟后,他们将看到一个对话框输入他们的密码.如果他们不在5分钟内,系统会自动将其注销,并且服务器的会话将被注销(下次访问页面时,与大多数站点一样).

Javascript仅用作对用户的警告.如果JavaScript被禁用,那么他们将不会收到警告(并且大部分网站都不工作),他们将在下次请求新页面时注销.

Answer 1

这就是我想出来的.它似乎适用于大多数浏览器,但我想确保它始终可以在任何地方使用:

var timeoutTime = 1800000;
var timeoutTimer = setTimeout(ShowTimeOutWarning, timeoutTime);
$(document).ready(function() {
    $('body').bind('mousedown keydown', function(event) {
        clearTimeout(timeoutTimer);
        timeoutTimer = setTimeout(ShowTimeOutWarning, timeoutTime);
    });
});

有谁看到任何问题？

Answer 2

您可以观看鼠标移动,但这是关于用户仍然在那里而不是听取点击事件的最佳情况.但javascript无法判断它是活动标签还是浏览器甚至是打开的.(好吧,你可以得到浏览器的宽度和高度,并告诉你它是否被最小化)

Answer 3

我刚刚做了类似的事情,虽然使用Prototype而不是JQuery,但我想只要JQuery支持自定义事件,实现就会大致相同.

简而言之,IdleMonitor是一个观察鼠标和键盘事件的类(根据您的需要进行相应调整).每30秒重置计时器并广播一个状态:idle事件,除非它获得鼠标/键事件,在这种情况下它会广播一个状态:active事件.

var IdleMonitor = Class.create({

    debug: false,
    idleInterval: 30000, // idle interval, in milliseconds
    active: null,
    initialize: function() {
        document.observe("mousemove", this.sendActiveSignal.bind(this));
        document.observe("keypress", this.sendActiveSignal.bind(this));
        this.timer = setTimeout(this.sendIdleSignal.bind(this), this.idleInterval);
    },

    // use this to override the default idleInterval
    useInterval: function(ii) {
        this.idleInterval = ii;
        clearTimeout(this.timer);
        this.timer = setTimeout(this.sendIdleSignal.bind(this), ii);
    },

    sendIdleSignal: function(args) {
        // console.log("state:idle");
        document.fire('state:idle');
        this.active = false;
        clearTimeout(this.timer);
    },

    sendActiveSignal: function() {
        if(!this.active){
            // console.log("state:active");
            document.fire('state:active');
            this.active = true;
            this.timer = setTimeout(this.sendIdleSignal.bind(this), this.idleInterval);
        }
    }
});

然后我刚刚创建了另一个在其中包含以下内容的类:

Event.observe(document, 'state:idle', your-on-idle-functionality);
Event.observe(document, 'state:active', your-on-active-functionality)

Answer 4

Ifvisible.js是一个交叉浏览器轻量级解决方案.它可以检测用户何时切换到另一个选项卡并返回当前选项卡.它还可以检测用户何时进入空闲状态并再次变为活动状态.它非常灵活.

Answer 5

Ifvisible是一个不错的JS库，用于检查用户的非活动状态。

ifvisible.setIdleDuration(120); // Page will become idle after 120 seconds

ifvisible.on("idle", function(){
   // do something
});