如何使用 JavaScript/jQuery 检测用户当前是否在页面上处于活动状态?

IT技术 javascript jquery
2021-01-15 14:14:31

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

我认为最好使用附加到 body 标签的事件气泡,然后继续重置计时器 30 分钟,但我不确定如何创建它。

我有可用的 jQuery,但我不确定其中有多少会实际使用 jQuery。

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

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

Javascript 仅用作对用户的警告。如果 JavaScript 被禁用,那么他们将不会收到警告,并且(以及大多数站点无法运行)他们将在下次请求新页面时被注销。

6个回答

这是我想出的。它似乎适用于大多数浏览器,但我想确保它始终适用于任何地方:

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

有人看到任何问题吗?

要添加到 Glade 的评论中,我还使用鼠标移动,ala: $('body').bind('mousemove mousedown keydown touchstart', function(event) {....
2021-03-24 14:14:31
Thxs Shog9,我经常想知道这个。但是,它不会通过用新计时器覆盖变量来清除现有计时器吗?
2021-03-29 14:14:31
一个小问题 - 在开始另一个计时器之前,您需要清除现有计时器!我已经在...中编辑了此更改
2021-04-04 14:14:31
不,该变量只是一个计时器 ID,计时器本身是一个内部浏览器结构。将 ID 存储在变量中只是一种向 clearTimeout 函数标识内部浏览器结构的简单方法。
2021-04-04 14:14:31
仅添加一项,我添加了“touchstart”事件以在启用触控的设备上更好地工作。即 $('body').bind('mousedown keydown touchstart', function(event) {....
2021-04-08 14:14:31

您可以观察鼠标移动,但这是最好的方法,可以指示用户仍然在那里而不听单击事件。但是 javascript 无法判断它是活动选项卡还是浏览器是否打开。(好吧,您可以获得浏览器的宽度和高度,这会告诉您它是否已最小化)

您也可以查看 keyup 事件
2021-03-23 14:14:31
@Malfist-正是我的意思,检查两者,而不仅仅是一个。这就是为什么我说“还要查看 keyup 事件”
2021-03-30 14:14:31
OP 说不点击也不打字,所以不会有 keyup 事件。
2021-04-02 14:14:31
@TStamper:同意。想象一下,花半个小时在“投诉”框中输入一封长信,结果却让该网站将您注销,就像您在一段长达一段的结束侮辱上进行最后的繁荣一样。会气死...
2021-04-04 14:14:31
你的意思是没有keyup事件?当用户停止打字时,这是最后一个 keyup 事件,并且不能通过 keyup 函数事件查看该 keyup 事件发生的时间
2021-04-12 14:14:31

Ifvisible.js是一个跨浏览器的轻量级解决方案,可以做到这一点。它可以检测用户何时切换到另一个选项卡并返回到当前选项卡。它还可以检测用户何时空闲并再次活跃。它非常灵活。

对我来说最好的答案(:
2021-03-22 14:14:31
对我来说最好的解决方案。
2021-04-04 14:14:31

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

简而言之,IdleMonitor 是一个观察鼠标和键盘事件的类(根据您的需要进行相应调整)。每 30 秒它重置计时器并广播一个 state:idle 事件,除非它获得鼠标/键事件,在这种情况下它广播一个 state: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)

Ifvisible是一个不错的 JS 库,用于检查用户不活动。

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

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