How to automatically reload a page after a given period of inactivity

Question

How can I automatically reload a webpage  if there have been no activity on the page for a given period of time

User · Answer

I am doing it like this  let lastActionTaken   new Date   getTime    function checkLastAction       let now   new Date   getTime      if  now - lastActionTaken  gt  1000   60   60  window location reload      else lastActionTaken   now    window addEventListener  quot mousemove quot   checkLastAction   window addEventListener  quot touchstart quot   checkLastAction   window addEventListener  quot keydown quot   checkLastAction    This will reload the page as soon as the user moves their mouse  hits a key or touches a touchscreen if it has been inactive for 1 hour  Also  this takes care of the focus as well  so if a user is moving their mouse in a different program and then come back to this window it will reload  which is good because the point is to not have old data being shown

User · Answer

And finally the most simple solution   With alert confirmation    lt script type  text javascript  gt         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           lt  script gt    Without alert confirmation    lt script type  text javascript  gt         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           lt  script gt    Body code is the SAME for both solutions   lt body onload  StartTimers     onmousemove  ResetTimers     onKeyPress  ResetTimers     gt

User · Answer

This task is very easy use following code in html header section   lt head gt   lt meta http-equiv  refresh  content  30    gt   lt  head gt    It will refresh your page after 30 seconds

User · Answer

Using LocalStorage to keep track of the last time of activity  we can write the reload function as follows  function reloadPage expiryDurationMins        const lastInteraction   window localStorage getItem  lastinteraction       if   lastInteraction  return    no interaction recorded since page load     const inactiveDurationMins    Date now   - Number lastInteraction     60000     const pageExpired   inactiveDurationMins  gt   expiryDurationMins     if  pageExpired  window location reload       Then we create an arrow function which saves the last time of interaction in milliseconds String   const saveLastInteraction        gt  window localStorage setItem  last   Date now   toString      We will need to listen to the beforeunload event in the browser to clear our lastinteraction record so we don t get stuck in an infinite reload loop   window addEventListener  beforeunload        gt  window localStorage removeItem  lastinteraction      The user activity events we will need to monitor would be mousemove and keypress  We store the last interaction time when the user moves the mouse or presses a key on the keyboard  window addEventListener  mousemove   saveLastInteraction  window addEventListener  keypress   saveLastInteraction    To set up our final listener  we will use the load event  On page load  we use the setInterval function to check if the page has expired after a certain period   const expiryDurationMins   1  window addEventListener  load   setInterval bind null  reloadPage bind null  expiryDurationMins   1000

User · Answer

I would consider activity to be whether or not the user is focused on the window  For example  when you click from one window to another  e g  Google Chrome to iTunes  or Tab 1 to Tab 2 within an internet browser   the webpage can send a callback saying  Im out of focus   or  Im in focus    One could use jQuery to harness this possible lack of activity to do whatever they wanted  If I were in your position  I would use the following code to check for focus every 5 seconds  etc and reload if no focus   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

User · Answer

Yes dear then you have to use Ajax technology  to changes contents of   particular html tag      lt html gt       lt head gt           lt script src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt           lt title gt Ajax Page lt  title gt           lt script gt          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                                                      lt  script gt       lt  head gt       lt body gt       lt div id  wrapper  gt      contents will be changed automatically        lt  div gt    lt  body gt    lt  html gt

User · Answer

Based on the accepted answer of arturnt  This is a slightly optimized version  but does essentially the same thing   var time   new Date   getTime      document body  bind  mousemove keypress   function          time   new Date   getTime         setInterval function         if  new Date   getTime   - time  gt   60000            window location reload true            1000     Only difference is that this version uses setInterval instead of setTimeout  which makes the code more compact

User · Answer

lt script type  text javascript  gt    var timeout   setTimeout  location reload true    600000     function resetTimeout         clearTimeout timeout       timeout   setTimeout  location reload true    600000        lt  script gt    Above will refresh the page every 10 minutes unless resetTimeout   is called  For example    lt a href  javascript    onclick  resetTimeout     gt clicky lt  a gt

User · Answer

Auto reload with target of your choice  In this case target is  self set to itself but you could change the reload page by simply changing the window open  self location     self    code to something like this examplewindow top location  window open  http   www YourPageAdress com     self      With a confirmation ALERT message    lt script language  JavaScript  gt  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       lt  script gt    Without confirmation alert    lt script language  JavaScript  gt  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       lt  script gt    Body code is the SAME for both solutions    lt body onLoad  set interval    document form1 exp dat focus     onKeyPress  reset interval     onmousemove  reset interval     onclick  reset interval     onscroll  reset interval     gt

User · Answer

var bd   document getElementsByTagName  body   0   var time   new Date   getTime     bd onmousemove   goLoad  function goLoad     if new Date   getTime   - time  gt   1200000        time   new Date   getTime        window location reload true        else          time   new Date   getTime              Each time you move the mouse it will check the last time you moved the mouse  If the time interval is greater than 20  it will reload the page  else it will renew the last-time-you-moved-the-mouse

User · Answer

With on page confirmation text instead of alert  Since this is another method to auto load if inactive I give it a second answer  This one is more simple and easier to understand   With reload confirmation on the page   lt script language  javaScript  type  text javascript  gt   lt  -- 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    -- gt   lt  script gt    Confirmation box when using with on page confirmation   lt div class  leftcolNon  gt   lt div id  autoCloseDiv  style  display none  gt   lt center gt   lt b gt Inactivity warning  lt  b gt  lt br   gt  This page will Reloads automatically unless you hit  Cancel   lt  p gt   lt input type  button  value  Load  onclick  definitelyClose       gt   lt input type  button  value  Cancel  onclick  cancelClose       gt   lt  center gt   lt  div gt   lt  div gt    Body codes for both are the SAME   lt body onmousedown  resetTimeout     onmouseup  resetTimeout     onmousemove  resetTimeout     onkeydown  resetTimeout     onload  timeoutObject setTimeout  promptForClose    timePeriod    gt    NOTE  If you do not want to have the on page confirmation  use Without confirmation   lt script language  javaScript  type  text javascript  gt   lt  -- 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    -- gt   lt  script gt

User · Answer

use JavaScript setInterval method    setInterval function    location reload       3000

User · Answer

If you want to refresh the page if there is no activity then you need to figure out how to define activity  Let s say we refresh the page every minute unless someone presses a key or moves the mouse  This uses jQuery for event binding    lt script gt       var time   new Date   getTime           document body  bind  mousemove keypress   function e             time   new Date   getTime                   function refresh              if new Date   getTime   - time  gt   60000                window location reload true            else               setTimeout refresh  10000                setTimeout refresh  10000    lt  script gt

User · Answer

This can be accomplished without javascript  with this metatag    lt meta http-equiv  refresh  content  5   gt    where content   5  are the seconds that the page will wait until refreshed   But you said only if there was no activity  what kind for activity would that be

User · Answer

I have built a complete javascript solution as well that does not require jquery  Might be able to turn it into a plugin  I use it for fluid auto-refreshing  but it looks like it could help you here   JSFiddle AutoRefresh     Refresh Rate is how often you want to refresh the page     bassed off the user inactivity   var refresh rate   200     lt -- In seconds  change to your needs var last user action   0  var has focus   false  var lost focus count   0     If the user loses focus on the browser to many times     we want to refresh anyway even if they are typing      This is so we don t get the browser locked into     a state where the refresh never happens      var focus margin   10       Reset the Timer on users last action 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      lt   Lost Focus          Count Down that executes ever second setInterval function          last user action        refreshCheck       1000       The code that checks if the window needs to reload function refreshCheck         var focus   window onfocus      if   last user action  gt   refresh rate  amp  amp   has focus  amp  amp  document readyState     complete      lost focus count  gt  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   window addEventListener  scroll   reset  false   document addEventListener  touchMove   reset  false   document addEventListener  touchEnd   reset  false

[javascript] How to automatically reload a page after a given period of inactivity

Examples related to javascript

Examples related to ajax