Как автоматически перезагрузить страницу после определенного периода бездействия

Как я могу автоматически перезагрузить веб-страницу, если в течение определенного периода времени на ней не было никаких действий?

Если вы хотите обновить страницу, если нет активности, то вам нужно выяснить, как определить активность. Допустим, мы обновляем страницу каждую минуту, если кто-то не нажимает клавишу или не двигает мышь. Это использует 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, с этим метатегом:

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

где content = "5" - это секунды, которые страница будет ждать до обновления.

Но вы сказали, что если бы не было активности, какой это будет вид деятельности?

Я построил полное решение Javascript, а также не требует jquery. Может быть в состоянии превратить его в плагин. Я использую его для автоматического обновления жидкости, но, похоже, он может вам помочь.

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>

Выше будет обновлять страницу каждые 10 минут, если не вызывается resetTimeout (). Например:

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

На основании принятого ответа 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, что делает код более компактным.

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 минут, он перезагрузит страницу, иначе он обновит последний раз, когда вы двигали мышью.

Автоматическая перезагрузка с целью по вашему выбору. В этом случае цель _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>

Код тела - это ЖЕ для обоих решений:

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

использовать setIntervalметод JavaScript :

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

Да, дорогая, тогда вы должны использовать технологию 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 или Tab 1 - Tab 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

И, наконец, самое простое решение:

С подтверждением оповещения:

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

Код тела - ЖЕ для обоих решений

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

Используя LocalStorage для отслеживания последнего времени активности, мы можем написать функцию перезагрузки следующим образом

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

Затем мы создаем функцию стрелки, которая сохраняет время последнего взаимодействия в миллисекундах (String).

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

Нам нужно будет прослушать beforeunloadсобытие в браузере, чтобы очистить нашу lastinteractionзапись, чтобы не застрять в бесконечном цикле перезагрузки.

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

События активности пользователей, которые нам нужно будет отслеживать, будут mousemoveи keypress. Мы сохраняем время последнего взаимодействия, когда пользователь перемещает мышь или нажимает клавишу на клавиатуре

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

Чтобы настроить нашего финального слушателя, мы будем использовать loadсобытие. При загрузке страницы мы используем setIntervalфункцию, чтобы проверить, не истек ли срок действия страницы после определенного периода.

const expiryDurationMins = 1

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

Эта задача очень проста, используя следующий код в разделе заголовка HTML

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

Он обновит вашу страницу через 30 секунд.