通过浏览器检测用户不活动 - 完全通过 javascript

IT技术 javascript dom-events session-timeout
2021-03-03 15:16:58

在构建监视器时,它将监视用户在浏览器上的任何活动,例如单击按钮或在文本框上键入(而不是鼠标悬停在文档上)。所以如果用户长时间没有活动,会话就会超时。

我们需要在没有 jQuery 或其他任何东西的情况下做到这一点。我可以使用ajax。另一端的 Java servlet 更可取。

2个回答

这里是纯 JavaScript 的方式来跟踪空闲时间,当它达到一定限制时做一些动作,你可以相应地修改并使用

var IDLE_TIMEOUT = 60; //seconds
var _idleSecondsCounter = 0;
document.onclick = function() {
    _idleSecondsCounter = 0;
};
document.onmousemove = function() {
    _idleSecondsCounter = 0;
};
document.onkeypress = function() {
    _idleSecondsCounter = 0;
};
window.setInterval(CheckIdleTime, 1000);

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

此代码将在显示警报和重定向之前等待 60 秒,并且任何操作都将“重置”计数 - 鼠标单击、鼠标移动或按键。

它应该尽可能跨浏览器,并且是直接的。它还支持显示剩余时间,如果您将元素添加到您的页面,ID 为 SecondsUntilExpire。

参考:如何知道浏览器空闲时间?

setInterval 对我来说是断断续续的,这是为什么?
2021-05-17 15:16:58
为什么不直接使用monitorEvents(window);
2021-05-18 15:16:58
网址不起作用。结帐jsfiddle.net/mManishTrivedi/cbq1hmtg
2021-05-18 15:16:58

您建议的方法的问题是会话将超时,即使用户正在移动鼠标或输入输入。因此,如果您将会话超时设置为 20 分钟,并且用户持续输入 21 分钟,则会话仍将超时,即使他们已处于“活动状态”。唯一可以防止会话超时的是对服务器的新请求。

方案一:让服务器控制会话超时时间

除非您在后台发出 Ajax 请求,否则会不断更新会话,否则您可以在页面加载时设置 JavaScript 超时,并以这种方式提醒用户。除非你向服务器发出其他请求,当用户在你的页面上时,没有必要让它变得困难:

setTimeout(function () {
   alert("You've timed out baby!");
}, 1200000); // 20 minutes in millisec (modify to your session timeout)

如果用户访问另一个页面或重新加载该页面,会话将被更新并重置 JavaScript 计时器。如果用户没有做这样的事情,会话将在用户收到警报的同时超时。

方案二:让客户端控制会话超时时间

如果您希望 JavaScript 完全控制会话持续多长时间,以便在用户键入、移动鼠标​​或其他任何时候更新它,您也将在后台继续向您的服务器发出 Ajax 请求,所以会议续期。(这可能是一个空的虚拟请求,只是命中服务器的东西)

然后,您必须跟踪您认为是“用户活动”的所有操作(AnhSirk 在他的回答中建议了一种方法)并在发生此类事件时重置超时计时器。如果用户处于非活动状态的时间太长,则必须向服务器上的页面发出 Ajax 请求,这会使会话无效,然后您可以提醒用户会话已超时。