页面监听，一段时间内不操作网页，就自动跳转到登录页

需求：用户在 5 分钟内没有操作网页，就自动跳转到登录页。

环境：jquery 项目，有公共的 js 文件。

在所有页面都引用的 js 文件中添加下面代码：

//判断用户是否在5分钟内未操作页面，如果没有操作，则跳转到登录页
var lastTime = new Date().getTime();
var currentTime = new Date().getTime();
var timeOut = 5*60*1000; //设置超时时间： 5分钟
$(function(){/* 鼠标移动事件 */$(document).mouseover(function(){lastTime = new Date().getTime(); //更新操作时间});
});
/* 定时器  间隔1秒检测是否长时间未操作页面  */
var timer = window.setInterval(testTime, 1000);
function testTime(){currentTime = new Date().getTime(); //更新当前时间if(location.href.substring(location.href.length-10) == "login.html"){ //登录页clearInterval(timer);  //关闭定时器console.log("当前所在页为登录页，不需要跳转");} else {if(currentTime - lastTime > timeOut){ //判断是否超时---超时clearInterval(timer); var src = window.top.location.href.substring(0, location.href.length-10); //【注1】//跳转到outline,提示用户跳转，可在后台进行销毁session;location.href = src + "outline.html"; //没有这个页面的可以直接跳转到登录页【注2】   } }
}

注意：

window.top 获取到父页面的信息，即 index.html 页，因为 index.html 和 login.html 同级，所以只要把 index.html 的路由信息中的 index 改为 login，就可以跳转到 login.html页面。
outline.html 是一个中转站页面，目的是为了不让页面跳转太过生硬。没有这个页面的可以直接把代码中的 outline.html 改为 login.html；
substring(start, end); 方法用来截取字符串，返回一个新字符串，不影响原数组。start 是开始位置（从0开始），end 表示结束位置。

outline.html


<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><style type="text/css">
* {margin: 0;padding: 0;}
/*手机*/
@media screen and (max-width: 600px) {.mBody .fresh { position: absolute; left: 35%; top: 70%; width: 30%; }
}
/*平板*/
@media screen and (min-width: 600px) and (max-width: 960px) {.mBody .fresh { position: absolute; left: 35%; top: 78%; width: 30%; }
}
/*电脑*/
.pcBody { background: url(images/tips/bg.png);background-position-y: -150px; width: 100%; height: 100%; overflow: hidden; }.pcContent {width: 700px;margin: 265px auto;}
.pcContent h1 {font-size: 36px;color: #cb9f63;line-height: 60px;}
.pcContent p {font-size: 18px;color: #66686A;line-height: 24px;}
.pcContent p a {color: #cb9f63;}
</style><body><div class="pcContent"><h1>由于您长时间未操作，请重新登录！</h1><p style="text-align: center;"><span id='second' style="color: red; font-size: 20px;"></span>s后，您将返回<a href="../login.html">登录</a>页面。</p></div>
</body><script src="plugins/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script><script>(function(){var system ={};var p = navigator.platform;       system.win = p.indexOf("Win") == 0;  system.mac = p.indexOf("Mac") == 0;  system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);     if(system.win||system.mac||system.xll){//如果是电脑document.getElementsByTagName("body")[0].className="pcBody";    }else{  //如果是手机或平板var body=document.getElementsByTagName("body")[0];body.className="mBody";body.innerHTML='<img class="fresh" src="../common/tips/fresh.png" onclick="history.go(0)">';}})();var count=3; //3秒钟后跳转到登录页$("#second").text(count+'');var timer = setInterval(go,1000);function go(){count--;if(count==0) {clearInterval(timer);window.location.href="login.html";}else{$("#second").text(count+'');}}</script>

页面监听，一段时间内不操作网页，就自动跳转到登录页相关推荐

jquery 监听input输入停止，实现文本框自动跳转
今天学到了一个新的东西,在此记录一下我遇到了一个这样的需求:添加扫描一条数据,无鼠标键盘.工具:扫描枪,动作:扫描两个条码扫描抢扫描时,扫描出来的数据是显示在当前焦点上,用input的文本框来保存 ...
vue-router判断页面未登录时，自动跳转到登录页
1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录下面的两个页面,登录页不需要检测,首页需要检测 const routers = [ {path: '/ ...
监听localStorage变化（同页面监听）
"当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发" 同页面监听,重写localStorage的方法,抛出自定义事件: &l ...
【js监听报错】页面监听js报错问题
<html> <head> <script type="text/javascript">// 页面监听js报错问题 οnerrοr=handl ...
php rn 返回,rn滑动返回页面监听 - osc_13a0punx的个人空间 - OSCHINA - 中文开源技术交流社区...
开发rn的同学都已经知道这个问题很坑了,真的很难弄,网上的方法尝试过很多,返回的的时候回调,是用的最多的,最开始我也是用的这种方式,但是滑动返回的时候监听不到.并且用起来也比较麻烦,不但需要在当前页面 ...
HTM页面监听Crtl + C 事件
HTM页面监听Crtl + C 事件 document.addEventListener("copy", function(e) {//取消默认事件,才能修改复制的值var cop ...
HTML父页面监听子页面关闭并回调方法
1.方式一:父页面监听父页面中: //此处省略新窗口的设置参数var win = window.open("url", "name", "featu ...
Vue 用户30分钟未操作，页面跳转到登录页
<template><div id="app"><router-view/></div> </template> < ...
php拦截登录页面跳转页面,PHP未登录自动跳转到登录页面
PHP未登录自动跳转到登录页面下面一段代码给大家分享php未登录自动跳转到登录页面,具体代码如下所示: namespace Home\Controller; use Think\Controller ...

页面监听，一段时间内不操作网页，就自动跳转到登录页

页面监听，一段时间内不操作网页，就自动跳转到登录页相关推荐

最新文章

热门文章