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

Question

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

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

126

ajax javascript

автор: royhowie

13 ответов

автор: Art · Accepted Answer · 2011-01-10 06:42:31

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

автор: amosrivera · Accepted Answer · 2017-01-13 06:39:39

Это можно сделать без javascript, с помощью этого metatag:

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

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

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

автор: Brandt · Accepted Answer · 2018-08-13 16:03:13

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

JSFiddle Автообновление

var refresh_rate = 200; //<-- In seconds, change to your needs
var last_user_action = 0;
var has_focus = false;
var lost_focus_count = 0;
var focus_margin = 10; // If we lose focus more then the margin we want to refresh


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

setInterval(function () {
    last_user_action++;
    refreshCheck();
}, 1000);

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

автор: Yuriy Faktorovich · Accepted Answer · 2014-01-03 11:03:27

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

автор: mike_x_ · Accepted Answer · 2013-12-30 14:14:32

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

автор: Hannes Sachsenhofer · Accepted Answer · 2015-06-01 11:17:34

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

автор: SeekLoad · Accepted Answer · 2017-11-01 17:10:31

автоматическая перезагрузка с целью по вашему выбору. В этом случае target is _self установите для себя, но вы можете изменить страницу перезагрузки, просто изменив window.open('self.location', '_self'); код к чему-то вроде этого примераwindow.top.location="window.open('http://www.YourPageAdress.com', '_self'";.

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

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

автор: Mahfuz · Accepted Answer · 2018-06-21 14:32:15

использовать jQuery setInterval способ:

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

автор: FAISAL · Accepted Answer · 2013-12-04 09:01:51

эта задача очень проста в использовании следующий код в разделе заголовка html

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

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

автор: FAISAL · Accepted Answer · 2014-09-17 19:35:33

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

автор: Joseph Orlando · Accepted Answer · 2014-12-18 22:58:09

Я считаю activity будет ли пользователь сфокусирован на окне. Например, когда вы нажимаете из одного окна в другое (например, Google Chrome в iTunes или Tab 1 в Tab 2 в интернет-браузере), веб-страница может отправить обратный вызов "Im вне фокуса!"или "я в фокусе!". Можно использовать 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

автор: SeekLoad · Accepted Answer · 2017-11-01 17:07:19

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

С подтверждением предупреждений:

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

автор: SeekLoad · Accepted Answer · 2017-11-01 17:09:35

С текстом подтверждения на странице вместо предупреждения

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

с подтверждением перезагрузки на странице

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