So laden Sie eine Seite nach einer bestimmten Zeit der Inaktivität automatisch neu

Wie kann ich eine Webseite automatisch neu laden, wenn auf der Seite für einen bestimmten Zeitraum keine Aktivität stattgefunden hat?

Wenn Sie die Seite aktualisieren möchten, wenn keine Aktivität vorhanden ist, müssen Sie herausfinden, wie die Aktivität definiert wird. Angenommen, wir aktualisieren die Seite jede Minute, es sei denn, jemand drückt eine Taste oder bewegt die Maus. Dies verwendet jQuery für die Ereignisbindung:

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

Dies kann mit diesem Metatag ohne Javascript erreicht werden:

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

Dabei ist content = "5" die Sekunde, die die Seite wartet, bis sie aktualisiert wird.

Aber Sie sagten nur, wenn es keine Aktivität gäbe, welche Art von Aktivität wäre das?

Ich habe auch eine vollständige Javascript-Lösung erstellt, für die keine Abfrage erforderlich ist. Könnte es in ein Plugin verwandeln können. Ich benutze es für die automatische Flüssigkeitsauffrischung, aber es sieht so aus, als könnte es Ihnen hier helfen.

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>

Oben wird die Seite alle 10 Minuten aktualisiert, sofern nicht resetTimeout () aufgerufen wird. Beispielsweise:

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

Basierend auf der akzeptierten Antwort von arturnt. Dies ist eine leicht optimierte Version, macht aber im Wesentlichen dasselbe:

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

Der einzige Unterschied besteht darin, dass diese Version setIntervalanstelle von verwendet wird setTimeout, wodurch der Code kompakter wird.

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

Jedes Mal, wenn Sie die Maus bewegen, wird überprüft, wann Sie die Maus zuletzt bewegt haben. Wenn das Zeitintervall größer als 20 Minuten ist, wird die Seite neu geladen, andernfalls wird das letzte Mal erneuert, wenn Sie die Maus bewegt haben.

Automatisches Neuladen mit einem Ziel Ihrer Wahl. In diesem Fall ist das Ziel _selfauf sich selbst festgelegt. Sie können die Seite zum erneuten Laden jedoch ändern, indem Sie einfach den window.open('self.location', '_self');Code in ein Beispiel wie dieses ändern window.top.location="window.open('http://www.YourPageAdress.com', '_self'";.

Mit einer Bestätigungsmeldung 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>

Ohne Bestätigungsalarm:

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

Der Body-Code ist für beide Lösungen gleich:

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

Verwenden Sie die JavaScript- setIntervalMethode:

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

Ja, Schatz, dann musst du die Ajax-Technologie verwenden. um den Inhalt eines bestimmten HTML-Tags zu ändern:

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

Ich würde überlegen activity, ob sich der Benutzer auf das Fenster konzentriert oder nicht. Wenn Sie beispielsweise von einem Fenster in ein anderes klicken (z. B. Google Chrome zu iTunes oder Tab 1 zu Tab 2 in einem Internetbrowser), kann die Webseite einen Rückruf mit der Meldung "Ich bin unscharf!" Senden. oder "Ich bin im Fokus!". Man könnte jQuery verwenden, um diesen möglichen Mangel an Aktivität zu nutzen, um zu tun, was sie wollten. Wenn ich in Ihrer Position wäre, würde ich den folgenden Code verwenden, um alle 5 Sekunden usw. nach dem Fokus zu suchen und neu zu laden, wenn kein Fokus vorhanden ist.

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

Und schließlich die einfachste Lösung:

Mit Alarmbestätigung:

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

Ohne Alarmbestätigung:

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

Der Body-Code ist für beide Lösungen gleich

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

Mit Bestätigungstext auf der Seite anstelle einer Warnung

Da dies eine andere Methode zum automatischen Laden ist, wenn sie inaktiv ist, gebe ich eine zweite Antwort. Dieser ist einfacher und leichter zu verstehen.

Mit Reload-Bestätigung auf der Seite

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

Bestätigungsfeld bei Verwendung mit On-Page-Bestätigung

<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 Codes für beide sind die gleichen

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

HINWEIS: Wenn Sie keine Bestätigung auf der Seite wünschen, verwenden Sie Ohne Bestätigung

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

Mit LocalStorage, um den letzten Zeitpunkt der Aktivität zu verfolgen, können wir die Reload-Funktion wie folgt schreiben

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

Dann erstellen wir eine Pfeilfunktion, die die letzte Zeit der Interaktion in Millisekunden speichert (String)

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

Wir müssen das beforeunloadEreignis im Browser anhören, um unseren lastinteractionDatensatz zu löschen , damit wir nicht in einer Endlos-Neuladeschleife stecken bleiben.

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

Die Benutzeraktivitätsereignisse, die wir überwachen müssen, sind mousemoveund keypress. Wir speichern die letzte Interaktionszeit, wenn der Benutzer die Maus bewegt oder eine Taste auf der Tastatur drückt

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

Um unseren endgültigen Listener einzurichten, werden wir das loadEreignis verwenden. Beim Laden der Seite verwenden wir die setIntervalFunktion, um zu überprüfen, ob die Seite nach einem bestimmten Zeitraum abgelaufen ist.

const expiryDurationMins = 1

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

Diese Aufgabe ist sehr einfach, wenn Sie dem Code im HTML-Header-Abschnitt folgen

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

Ihre Seite wird nach 30 Sekunden aktualisiert.