如何在指定的闲置时间后自动重新加载页面
如果一段时间内页面上没有任何活动，我怎么能自动重新加载一个网页？
如果你想刷新页面，如果没有活动，那么你需要弄清楚如何定义活动。 假设我们每分钟刷新页面，除非有人按下一个键或移动鼠标。 这使用jQuery进行事件绑定：
<script> var time = new Date().getTime(); $(document.body).bind("mousemove keypress", function(e) { time = new Date().getTime(); }); function refresh() { if(new Date().getTime() - time >= 60000) window.location.reload(true); else setTimeout(refresh, 10000); } setTimeout(refresh, 10000); </script> 这可以完成没有JavaScript，与此metatag：
<meta http-equiv="refresh" content="5" >
其中内容=“5”是页面将等待刷新的秒数。
但是，只有在没有活动的情况下才会说，那会是什么样的活动呢？
<script type="text/javascript"> var timeout = setTimeout("location.reload(true);",600000); function resetTimeout() { clearTimeout(timeout); timeout = setTimeout("location.reload(true);",600000); } </script>
以上将每10分钟刷新页面，除非调用resetTimeout（）。 例如：
<a href="javascript:;" onclick="resetTimeout();">clicky</a>
我已经build立了一个完整的JavaScript解决scheme，以及不需要jQuery。 可以把它变成一个插件。 我用它stream体自动刷新，但它看起来可以帮助你在这里。
JSFiddle AutoRefresh
var refresh_rate = 200; //<-- In seconds, change to your needs var last_user_action = 0; var has_focus = false; var lost_focus_count = 0; var focus_margin = 10; // If we lose focus more then the margin we want to refresh function reset() { last_user_action = 0; console.log("Reset"); } function windowHasFocus() { has_focus = true; } function windowLostFocus() { has_focus = false; lost_focus_count++; console.log(lost_focus_count + " <~ Lost Focus"); } setInterval(function () { last_user_action++; refreshCheck(); }, 1000); function refreshCheck() { var focus = window.onfocus; if ((last_user_action >= refresh_rate && !has_focus && document.readyState == "complete") || lost_focus_count > focus_margin) { window.location.reload(); // If this is called no reset is needed reset(); // We want to reset just to make sure the location reload is not called. } } window.addEventListener("focus", windowHasFocus, false); window.addEventListener("blur", windowLostFocus, false); window.addEventListener("click", reset, false); window.addEventListener("mousemove", reset, false); window.addEventListener("keypress", reset, false);
var bd = document.getElementsByTagName('body')[0]; var time = new Date().getTime(); bd.onmousemove = goLoad; function goLoad() { if(new Date().getTime() - time >= 1200000) { time = new Date().getTime(); window.location.reload(true); }else{ time = new Date().getTime(); } }
每次移动鼠标时，都会检查上次移动鼠标的时间。 如果时间间隔大于20，则会重新载入页面，否则会更新最后一次移动的鼠标。
这个任务是很容易使用下面的代码在html标题部分
<head> <meta http-equiv="refresh" content="30" /> </head>
它会在30秒后刷新你的页面。
基于arturnt接受的答案。 这是一个稍微优化的版本，但基本上是一样的事情：
var time = new Date().getTime(); $(document.body).bind("mousemove keypress", function () { time = new Date().getTime(); }); setInterval(function() { if (new Date().getTime() - time >= 60000) { window.location.reload(true); } }, 1000);
唯一不同的是，这个版本使用setInterval而不是setTimeout ，这使得代码更紧凑。
自动重新加载您select的目标。 在这种情况下，target是自己设置的，但是你可以通过改变window.open('self.location', '_self');来改变重载页面window.open('self.location', '_self'); 代码类似于这个例子window.top.location="window.open('http://www.YourPageAdress.com', '_self'";
带有确认ALERT消息：
<script language="JavaScript"> function set_interval() { //the interval 'timer' is set as soon as the page loads var timeoutMins = 1000 * 1 * 15; // 15 seconds var timeout1Mins = 1000 * 1 * 13; // 13 seconds itimer=setInterval("auto_logout()",timeoutMins); atimer=setInterval("alert_idle()",timeout1Mins); } function reset_interval() { var timeoutMins = 1000 * 1 * 15; // 15 seconds var timeout1Mins = 1000 * 1 * 13; // 13 seconds //resets the timer. The timer is reset on each of the below events: // 1. mousemove 2. mouseclick 3. key press 4. scrolling //first step: clear the existing timer clearInterval(itimer); clearInterval(atimer); //second step: implement the timer again itimer=setInterval("auto_logout()",timeoutMins); atimer=setInterval("alert_idle()",timeout1Mins); } function alert_idle() { var answer = confirm("Session About To Timeout\n\n You will be automatically logged out.\n Confirm to remain logged in.") if (answer){ reset_interval(); } else{ auto_logout(); } } function auto_logout() { //this function will redirect the user to the logout script window.open('self.location', '_self'); } </script>
没有确认提醒：
<script language="JavaScript"> function set_interval() { //the interval 'timer' is set as soon as the page loads var timeoutMins = 1000 * 1 * 15; // 15 seconds var timeout1Mins = 1000 * 1 * 13; // 13 seconds itimer=setInterval("auto_logout()",timeoutMins); } function reset_interval() { var timeoutMins = 1000 * 1 * 15; // 15 seconds var timeout1Mins = 1000 * 1 * 13; // 13 seconds //resets the timer. The timer is reset on each of the below events: // 1. mousemove 2. mouseclick 3. key press 4. scrolling //first step: clear the existing timer clearInterval(itimer); clearInterval(atimer); //second step: implement the timer again itimer=setInterval("auto_logout()",timeoutMins); } function auto_logout() { //this function will redirect the user to the logout script window.open('self.location', '_self'); } </script>
两个解决scheme的主体代码是相同的：
<body onLoad="set_interval(); document.form1.exp_dat.focus();" onKeyPress="reset_interval();" onmousemove="reset_interval();" onclick="reset_interval();" onscroll="reset_interval();">
是的，亲爱的，那么你必须使用Ajax技术。 改变特定html标签的内容：
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <title>Ajax Page</title> <script> setInterval(function () { autoloadpage(); }, 30000); // it will call the function autoload() after each 30 seconds. function autoloadpage() { $.ajax({ url: "URL of the destination page", type: "POST", success: function(data) { $("div#wrapper").html(data); // here the wrapper is main div } }); } </script> </head> <body> <div id="wrapper"> contents will be changed automatically. </div> </body> </html>
我认为activity是用户是否关注窗口。 例如，当您从一个窗口点击到另一个窗口时（例如，Google Chrome浏览器到iTunes，或者networking浏览器中的标签1到标签2），网页可以发送一个回话，说明“我没有注意到！ 或“我在焦点！”。 人们可以使用jQuery来利用这种可能的缺乏活动来做任何他们想要的事情。 如果我在你的位置，我会使用下面的代码来检查每隔5秒等重点，如果没有焦点重新加载。
var window_focus; $(window).focus(function() { window_focus = true; }).blur(function() { window_focus = false; }); function checkReload(){ if(!window_focus){ location.reload(); // if not focused, reload } } setInterval(checkReload, 5000); // check if not focused, every 5 seconds
最后是最简单的解决scheme：
有警报确认：
<script type="text/javascript"> // Set timeout variables. var timoutWarning = 3000; // Display warning in 1Mins. var timoutNow = 4000; // Timeout in 2 mins. var warningTimer; var timeoutTimer; // Start timers. function StartTimers() { warningTimer = setTimeout("IdleWarning()", timoutWarning); timeoutTimer = setTimeout("IdleTimeout()", timoutNow); } // Reset timers. function ResetTimers() { clearTimeout(warningTimer); clearTimeout(timeoutTimer); StartTimers(); $("#timeout").dialog('close'); } // Show idle timeout warning dialog. function IdleWarning() { var answer = confirm("Session About To Timeout\n\n You will be automatically logged out.\n Confirm to remain logged in.") if (answer){ ResetTimers(); } else{ IdleTimeout(); } } // Logout the user and auto reload or use this window.open('http://www.YourPageAdress.com', '_self'); to auto load a page. function IdleTimeout() { window.open(self.location,'_top'); } </script>
没有警报确认：
<script type="text/javascript"> // Set timeout variables. var timoutWarning = 3000; // Display warning in 1Mins. var timoutNow = 4000; // Timeout in 2 mins. var warningTimer; var timeoutTimer; // Start timers. function StartTimers() { warningTimer = setTimeout(timoutWarning); timeoutTimer = setTimeout("IdleTimeout()", timoutNow); } // Reset timers. function ResetTimers() { clearTimeout(warningTimer); clearTimeout(timeoutTimer); StartTimers(); $("#timeout").dialog('close'); } // Logout the user and auto reload or use this window.open('http://www.YourPageAdress.com', '_self'); to auto load a page. function IdleTimeout() { window.open(self.location,'_top'); } </script>
正文代码是两个解决scheme的相同
<body onload="StartTimers();" onmousemove="ResetTimers();" onKeyPress="ResetTimers();">
随着页面确认文本，而不是警报
由于这是另一种自动加载的方法，如果不活动，我给它第二个答案。 这个更简单，更容易理解。
随着页面上的重新加载确认
<script language="javaScript" type="text/javascript"> <!-- var autoCloseTimer; var timeoutObject; var timePeriod = 5100; // 5,1 seconds var warnPeriod = 5000; // 5 seconds // Warning period should always be a bit shorter then time period function promptForClose() { autoCloseDiv.style.display = 'block'; autoCloseTimer = setTimeout("definitelyClose()", warnPeriod); } function autoClose() { autoCloseDiv.style.display = 'block'; //shows message on page autoCloseTimer = setTimeout("definitelyClose()", timePeriod); //starts countdown to closure } function cancelClose() { clearTimeout(autoCloseTimer); //stops auto-close timer autoCloseDiv.style.display = 'none'; //hides message } function resetTimeout() { clearTimeout(timeoutObject); //stops timer timeoutObject = setTimeout("promptForClose()", timePeriod); //restarts timer from 0 } function definitelyClose() { // If you use want targeted reload: parent.Iframe0.location.href = "https://URLHERE.com/" // or this: window.open('http://www.YourPageAdress.com', '_self'); // of for the same page reload use: window.top.location=self.location; // or window.open(self.location;, '_self'); window.top.location=self.location; } --> </script>
在使用页面确认时使用确认框
<div class="leftcolNon"> <div id='autoCloseDiv' style="display:none"> <center> <b>Inactivity warning!</b><br /> This page will Reloads automatically unless you hit 'Cancel.'</p> <input type='button' value='Load' onclick='definitelyClose();' /> <input type='button' value='Cancel' onclick='cancelClose();' /> </center> </div> </div>
双方的身体代码是相同的
<body onmousedown="resetTimeout();" onmouseup="resetTimeout();" onmousemove="resetTimeout();" onkeydown="resetTimeout();" onload="timeoutObject=setTimeout('promptForClose()',timePeriod);">
注意：如果您不想进行页面确认，请使用“ 不确认”
<script language="javaScript" type="text/javascript"> <!-- var autoCloseTimer; var timeoutObject; var timePeriod = 5000; // 5 seconds function resetTimeout() { clearTimeout(timeoutObject); //stops timer timeoutObject = setTimeout("definitelyClose()", timePeriod); //restarts timer from 0 } function definitelyClose() { // If you use want targeted reload: parent.Iframe0.location.href = "https://URLHERE.com/" // or this: window.open('http://www.YourPageAdress.com', '_self'); // of for the same page reload use: window.top.location=self.location; // or window.open(self.location;, '_self'); window.top.location=self.location; } --> </script>
