Comment recharger automatiquement une page après une période d'inactivité donnée

Comment puis-je recharger automatiquement une page Web, s'il n'y a eu aucune activité sur la page pendant une période donnée?

Si vous souhaitez actualiser la page s'il n'y a aucune activité, vous devez déterminer comment définir l'activité. Disons que nous actualisons la page toutes les minutes à moins que quelqu'un n'appuie sur une touche ou ne déplace la souris. Cela utilise jQuery pour la liaison d'événements:

<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>

Cela peut être accompli sans javascript, avec cette méta-étiquette:

<meta http-equiv="refresh" content="5" >

où content = "5" sont les secondes pendant lesquelles la page attendra jusqu'à ce qu'elle soit actualisée.

Mais vous avez dit que s'il n'y avait pas d'activité, de quel type d'activité s'agissait-il?

J'ai également construit une solution javascript complète qui ne nécessite pas de jquery. Pourrait être en mesure de le transformer en plugin. Je l'utilise pour un rafraîchissement automatique des fluides, mais il semble que cela pourrait vous aider ici.

Actualisation automatique JSFiddle

// Refresh Rate is how often you want to refresh the page 
// bassed off the user inactivity. 
var refresh_rate = 200; //<-- 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 + " <~ 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 >= 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);
window.addEventListener("scroll", reset, false);
document.addEventListener("touchMove", reset, false);
document.addEventListener("touchEnd", reset, false);

<script type="text/javascript">
  var timeout = setTimeout("location.reload(true);",600000);
  function resetTimeout() {
    clearTimeout(timeout);
    timeout = setTimeout("location.reload(true);",600000);
  }
</script>

Ci-dessus actualisera la page toutes les 10 minutes sauf si resetTimeout () est appelé. Par exemple:

<a href="javascript:;" onclick="resetTimeout();">clicky</a>

Basé sur la réponse acceptée d'arturnt. Il s'agit d'une version légèrement optimisée, mais qui fait essentiellement la même chose:

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

La seule différence est que cette version utilise à la setIntervalplace de setTimeout, ce qui rend le code plus compact.

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

Chaque fois que vous déplacez la souris, il vérifie la dernière fois que vous avez déplacé la souris. Si l'intervalle de temps est supérieur à 20 ', il rechargera la page, sinon il renouvellera la dernière fois que vous avez déplacé la souris.

Rechargement automatique avec la cible de votre choix. Dans ce cas, la cible est _selfdéfinie sur elle-même, mais vous pouvez modifier la page de rechargement en changeant simplement le window.open('self.location', '_self');code en quelque chose comme cet exemple window.top.location="window.open('http://www.YourPageAdress.com', '_self'";.

Avec un message ALERTE de confirmation:

<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>

Sans alerte de confirmation:

<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>

Le code corporel est le MÊME pour les deux solutions:

<body onLoad="set_interval(); document.form1.exp_dat.focus();" onKeyPress="reset_interval();" onmousemove="reset_interval();" onclick="reset_interval();" onscroll="reset_interval();">

utilisez la setIntervalméthode JavaScript :

setInterval(function(){ location.reload(); }, 3000);

Oui mon cher, alors vous devez utiliser la technologie Ajax. pour modifier le contenu d'une balise HTML particulière:

 <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>

Je considérerais activitysi oui ou non l'utilisateur se concentre sur la fenêtre. Par exemple, lorsque vous cliquez d'une fenêtre à une autre (par exemple, Google Chrome vers iTunes, ou l'onglet 1 vers l'onglet 2 dans un navigateur Internet), la page Web peut envoyer un rappel disant "Je suis floue!" ou "Je suis au point!". On pourrait utiliser jQuery pour exploiter ce possible manque d'activité pour faire ce qu'ils veulent. Si j'étais à votre place, j'utiliserais le code suivant pour vérifier la mise au point toutes les 5 secondes, etc. et rechargerais si aucun 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

Et enfin la solution la plus simple:

Avec confirmation d'alerte:

<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>

Sans confirmation d'alerte:

<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>

Le code corporel est le MÊME pour les deux solutions

<body onload="StartTimers();" onmousemove="ResetTimers();" onKeyPress="ResetTimers();">

Avec un texte de confirmation sur la page au lieu d'une alerte

Puisqu'il s'agit d'une autre méthode de chargement automatique si inactif, je lui donne une deuxième réponse. Celui-ci est plus simple et plus facile à comprendre.

Avec confirmation de rechargement sur la page

<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>

Boîte de confirmation lors de l'utilisation avec sur la page de confirmation

<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>

Les codes corporels pour les deux sont les MÊMES

<body onmousedown="resetTimeout();" onmouseup="resetTimeout();" onmousemove="resetTimeout();" onkeydown="resetTimeout();" onload="timeoutObject=setTimeout('promptForClose()',timePeriod);">

REMARQUE: Si vous ne souhaitez pas avoir la confirmation sur la page, utilisez Sans confirmation

<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>

En utilisant LocalStorage pour garder une trace de la dernière heure d'activité, nous pouvons écrire la fonction de rechargement comme suit

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 >= expiryDurationMins
    if (pageExpired) window.location.reload()
}

Ensuite, nous créons une fonction de flèche qui enregistre le dernier temps d'interaction en millisecondes (String)

const saveLastInteraction = () => window.localStorage.setItem('last', Date.now().toString())

Nous devrons écouter l' beforeunloadévénement dans le navigateur pour effacer notre lastinteractionenregistrement afin de ne pas rester coincé dans une boucle de rechargement infinie.

window.addEventListener('beforeunload', () => window.localStorage.removeItem('lastinteraction'))

Les événements d'activité des utilisateurs que nous devrons surveiller seraient mousemoveet keypress. Nous stockons l'heure de la dernière interaction lorsque l'utilisateur déplace la souris ou appuie sur une touche du clavier

window.addEventListener('mousemove', saveLastInteraction)
window.addEventListener('keypress', saveLastInteraction)

Pour configurer notre auditeur final, nous utiliserons l' loadévénement. Au chargement de la page, nous utilisons la setIntervalfonction pour vérifier si la page a expiré après une certaine période.

const expiryDurationMins = 1

window.addEventListener('load', setInterval.bind(null, reloadPage.bind(null, expiryDurationMins), 1000))

Cette tâche est très facile à utiliser en suivant le code dans la section d'en-tête html

<head> <meta http-equiv="refresh" content="30" /> </head>

Il rafraîchira votre page après 30 secondes.