Jak automatycznie przeładować stronę po określonym okresie bezczynności

Jak mogę automatycznie ponownie załadować stronę internetową, jeśli przez określony czas nie było na niej żadnej aktywności?

Jeśli chcesz odświeżyć stronę, jeśli nie ma żadnej aktywności, musisz dowiedzieć się, jak zdefiniować aktywność. Powiedzmy, że odświeżamy stronę co minutę, chyba że ktoś naciśnie klawisz lub poruszy myszą. To używa jQuery do wiązania zdarzeń:

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

Można to zrobić bez javascript, za pomocą tego metatagu:

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

gdzie content = „5” to sekundy, przez które strona będzie czekać do odświeżenia.

Ale powiedziałeś tylko, że gdyby nie było żadnej aktywności, jakiego rodzaju byłaby to działalność?

Zbudowałem również kompletne rozwiązanie javascript, które nie wymaga jquery. Może uda się przekształcić go we wtyczkę. Używam go do automatycznego odświeżania płynu, ale wygląda na to, że może ci pomóc.

JSFiddle AutoRefresh

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

Powyższe będzie odświeżać stronę co 10 minut, chyba że zostanie wywołana funkcja resetTimeout (). Na przykład:

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

Na podstawie zaakceptowanej odpowiedzi arturnt. Jest to nieco zoptymalizowana wersja, ale zasadniczo robi to samo:

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

Jedyną różnicą jest to, że ta wersja używa setIntervalzamiast setTimeout, co sprawia, że ​​kod jest bardziej zwarty.

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

Za każdym razem, gdy poruszasz myszą, sprawdzane jest, kiedy ostatnio poruszałeś myszą. Jeśli przedział czasu jest większy niż 20 minut, strona zostanie ponownie załadowana, w przeciwnym razie odnowi ostatni raz, gdy przesunąłeś mysz.

Automatycznie przeładuj wybrany cel. W tym przypadku cel jest _selfustawiony na siebie, ale możesz zmienić stronę ponownego ładowania, po prostu zmieniając window.open('self.location', '_self');kod na podobny do tego przykładu window.top.location="window.open('http://www.YourPageAdress.com', '_self'";.

Z potwierdzeniem Komunikat 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>

Bez alertu potwierdzającego:

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

Kod ciała jest taki sam dla obu rozwiązań:

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

użyj setIntervalmetody JavaScript :

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

Tak kochanie, więc musisz użyć technologii Ajax. aby zmienić zawartość danego tagu 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>

Zastanowiłbym activitysię, czy użytkownik koncentruje się na oknie. Na przykład, gdy klikniesz z jednego okna do drugiego (np. Google Chrome do iTunes lub Tab 1 do Tab 2 w przeglądarce internetowej), strona internetowa może wysłać wywołanie zwrotne o treści „Jestem nieostry!” lub „Jestem w centrum uwagi!”. Można by użyć jQuery, aby wykorzystać ten możliwy brak aktywności do robienia wszystkiego, co chcieli. Gdybym był na twoim miejscu, użyłbym następującego kodu do sprawdzania fokusu co 5 sekund itp. I ponownego ładowania, jeśli nie ma fokusa.

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

I wreszcie najprostsze rozwiązanie:

Z potwierdzeniem alertu:

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

Bez potwierdzenia ostrzeżenia:

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

Kod ciała jest taki sam dla obu rozwiązań

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

Zawiera tekst potwierdzenia na stronie zamiast alertu

Ponieważ jest to kolejna metoda automatycznego ładowania, jeśli jest nieaktywna, daję jej drugą odpowiedź. Ten jest prostszy i łatwiejszy do zrozumienia.

Z potwierdzeniem ponownego załadowania na stronie

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

Pole potwierdzenia podczas używania z potwierdzeniem na stronie

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

Kody treści dla obu są TAKIE SAME

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

UWAGA: Jeśli nie chcesz, aby potwierdzenie na stronie było wyświetlane, użyj opcji Bez potwierdzenia

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

Używając LocalStorage do śledzenia ostatniego czasu aktywności, możemy napisać funkcję przeładowania w następujący sposób

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

Następnie tworzymy funkcję strzałkową, która zapisuje ostatni czas interakcji w milisekundach (String)

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

Będziemy musieli odsłuchać beforeunloadzdarzenie w przeglądarce, aby wyczyścić nasz lastinteractionrekord, aby nie utknąć w nieskończonej pętli przeładowania.

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

Zdarzenia aktywności użytkowników, które będziemy musieli monitorować, to mousemovei keypress. Przechowujemy czas ostatniej interakcji, kiedy użytkownik poruszy myszką lub naciśnie klawisz na klawiaturze

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

Aby ustawić naszego końcowego słuchacza, użyjemy loadzdarzenia. Podczas ładowania strony używamy tej setIntervalfunkcji, aby sprawdzić, czy strona wygasła po określonym czasie.

const expiryDurationMins = 1

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

To zadanie jest bardzo łatwe w użyciu po kodzie w sekcji nagłówka html

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

Odświeży Twoją stronę po 30 sekundach.