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

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

我认为最好使用贴在身体标签上的事件喧闹,然后重新设置一个计时器30分钟,但我不确定如何创build这个。

我有jQuery可用,但我不知道有多less实际上会使用jQuery。

编辑:我更需要知道他们是否积极使用该网站,因此点击(更改字段或位置内的字段或selectcheckbox/收音机)或键入(在input,textarea等)。 如果他们在另一个选项卡或使用其他程序,那么我的假设是他们没有使用该网站,因此应该注销(出于安全原因)。

编辑#2:所以每个人都清楚,这根本不是确定用户是否login,validation或任何东西。 现在服务器会在30分钟内没有发出页面请求的情况下将用户login。 这种function可以防止有人花费大于30分钟时间填写表格,然后提交表格以确定他们没有被注销。 因此,这将与服务器站点结合使用,以确定用户是否处于非活动状态(不是单击或键入)。 基本上,这个交易是在空闲25分钟后,他们将会看到一个对话框来input他们的密码。 如果他们不在5分钟内,系统会自动注销,同时服务器的会话也会被注销(下一次访问页面,就像大多数站点一样)。

Javascript只是用来作为用户的警告。 如果JavaScript被禁用,那么他们将不会得到警告,并且(随着大多数网站不能正常工作),他们将在下一次请求新页面时被注销。

您可以观看鼠标移动 ,但这是关于最好的,你会得到一个用户仍然在那里没有听到点击事件的指示。 但是,JavaScript无法判断它是否是活动标签,或者浏览器是否打开。 (好吧,你可以得到浏览器的宽度和高度,它会告诉你它是否被最小化)

这是我想出来的。 它似乎在大多数浏览器中都能正常工作,但我想确保它始终在任何地方都能正常工作:

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

任何人看到任何问题?

我只是最近做了这样的事情,尽pipe使用Prototype而不是JQuery,但是我想如果JQuery支持自定义事件,实现将大致相同。

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

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

然后我创build了另一个在其中有以下内容的类:

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

Ifvisible.js是一个交叉浏览器轻量级解决scheme。 它可以检测用户何时切换到另一个选项卡并返回到当前选项卡。 它也可以检测用户什么时候空闲并重新激活。 这非常灵活。

使用jQuery,你可以很容易地观察鼠标移动,并用它来设置一个variables指示活动为真,然后使用香草JavaScript,你可以检查这个variables每30分钟(或任何其他间隔),看看它的真实。 如果它是错误的,运行你的function或任何。 查看setTimeout和setInterval进行计时。 你也可能每分钟都要运行一个函数来重置variables为false。

在这里我的镜头:

 var lastActivityDateTime = null; function checkActivity( ) { var currentTime = new Date(); var diff = (lastActivityDateTime.getTime( ) - currentTime.getTime( )); if ( diff >= 30*60*1000) { //user wasn't active; ... } setTimeout( 30*60*1000-diff, checkActivity); } setTimeout( 30*60*1000, checkActivity); // for first time we setup for 30 min. // for each event define handler and inside update global timer $( "body").live( "event_you_want_to_track", handler); function handler() { lastActivityDateTime = new Date(); // rest of your code if needed. } 

如果这是一个安全问题,使用javascript做这个客户端绝对是执行此检查pipe道的错误结束。 用户可以很容易地禁用JavaScript:你的应用程序做了什么呢? 如果用户在超时之前closures浏览器,该怎么办? 他们有没有注销?

大多数服务器端框架都有一些login的会话超时设置。 只要使用它,并节省自己的工程工作。

你不能依靠人们无法login没有JavaScript的假设,因此用户有JavaScript。 这样的假设对任何有决心的,甚至是受过良好教育的攻击者来说都是不可阻挡的。

使用javascript就像一个保安人员把银行金库的钥匙交给客户。 唯一的办法就是信仰。

请相信我,当我说,以这种方式使用JavaScript(并要求JavaScript的login!!)是一个令人难以置信的厚镂空的方式来devise任何types的networking应用程序。

Ifvisible是一个很好的JS库来检查用户的不活动。

 ifvisible.setIdleDuration(120); // Page will become idle after 120 seconds ifvisible.on("idle", function(){ // do something }); 

不使用JS,更简单(更安全)的方法就是将lastActivity时间戳存储在用户会话中,并在页面加载时检查它。 假设您正在使用PHP(您可以轻松地将此代码重新用于其他平台):

 if(($_SESSION['lastAct'] + 1800) < time()) { unset($_SESSION); session_destroy(); header('Location: session_timeout_message.php'); exit; } $_SESSION['lastAct'] = time(); 

并将其添加到页面中(可选,无论页面是否刷新,用户都将注销)(因为他登出下一页日志))。

 <meta http-equiv="refresh" content="1801;" /> 

如果您担心的是login超时后用户的信息丢失; 另一种select是在开始新会话时简单地存储所有发布的信息(当服务器closures/报废较旧的会话时,总会开始新的会话)路由到日志页面。 如果用户成功login,那么您可以使用此保存的信息将用户返回到他所在的位置。 这样,即使用户离开了几个小时,他也可以在成功login后返回到他所在的位置。 而不会丢失任何信息。

这需要程序员做更多的工作,但这是用户完全赞赏的一个很棒的function。 他们特别欣赏这样一个事实,即他们可以全心全意地集中精力,而不必每隔30分钟左右就可能丢失信息。