Sayfada belirli bir süre herhangi bir etkinlik yoksa, bir web sayfasını otomatik olarak nasıl yeniden yükleyebilirim?
Yanıtlar:
Herhangi bir etkinlik yoksa sayfayı yenilemek istiyorsanız, etkinliği nasıl tanımlayacağınızı bulmanız gerekir. Birisi bir tuşa basmadığı veya fareyi hareket ettirmediği sürece sayfayı her dakika yenilediğimizi varsayalım. Bu, olay bağlama için jQuery kullanır:
<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>
Bu, şu meta etiketiyle javascript olmadan gerçekleştirilebilir:
<meta http-equiv="refresh" content="5" >
içerik = "5", sayfanın yenilenene kadar bekleyeceği saniyedir.
Ama sadece aktivite olmasaydı, bu ne tür bir aktivite olurdu?
setInterval, bunun var olduğunu bilmek çok güzel!
Jquery gerektirmeyen tam bir javascript çözümü de geliştirdim. Bir eklentiye dönüştürebilir. Bunu otomatik sıvı yenileme için kullanıyorum, ancak burada size yardımcı olabilir gibi görünüyor.
// 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>
ResetTimeout () çağrılmadığı sürece yukarıdaki sayfa her 10 dakikada bir yenilenecektir. Örneğin:
<a href="javascript:;" onclick="resetTimeout();">clicky</a>
Arturnt'un kabul edilen cevabına göre. Bu biraz optimize edilmiş bir versiyondur, ancak esasen aynı şeyi yapar:
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);
Tek fark, bu sürümün setIntervalyerine kullanmasıdır setTimeout, bu da kodu daha kompakt hale getirir.
1000kullanarak hesaplama yapıyorsa neden aralığı olarak ayarlarsınız 60000?
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();
}
}
Fareyi her hareket ettirdiğinizde, fareyi en son hareket ettirdiğiniz zaman kontrol edilecektir. Zaman aralığı 20 'den büyükse sayfayı yeniden yükleyecektir, aksi takdirde fareyi son hareket ettirdiğiniz zamanı yenileyecektir.
Seçtiğiniz hedefle otomatik yeniden yükleyin. Bu durumda hedef _selfkendisine ayarlanır, ancak window.open('self.location', '_self');kodu bu örnekte olduğu gibi basitçe değiştirerek yeniden yükleme sayfasını değiştirebilirsiniz window.top.location="window.open('http://www.YourPageAdress.com', '_self'";.
Bir onay UYARI mesajı ile:
<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>
Onay uyarısı olmadan:
<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>
Gövde kodu, her iki çözüm için AYNIDIR:
<body onLoad="set_interval(); document.form1.exp_dat.focus();" onKeyPress="reset_interval();" onmousemove="reset_interval();" onclick="reset_interval();" onscroll="reset_interval();">
JavaScript setIntervalyöntemini kullanın :
setInterval(function(){ location.reload(); }, 3000);
Evet canım, o zaman Ajax teknolojisini kullanmalısın. belirli html etiketinin içeriğini değiştirmek için:
<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>
activityKullanıcının pencereye odaklanıp odaklanmadığını düşünürdüm . Örneğin, bir pencereden diğerine tıkladığınızda (ör. Google Chrome'dan iTunes'a veya bir internet tarayıcısında Sekme 1'den Sekme 2'ye), web sayfası "Odaklanmadım!" Diyen bir geri arama gönderebilir. veya "Odaktayım!". Bu olası aktivite eksikliğinden istediklerini yapmak için jQuery kullanılabilir. Senin pozisyonunda olsaydım, aşağıdaki kodu her 5 saniyede bir odak kontrolü yapmak ve odak yoksa yeniden yüklemek için kullanırdım.
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
Ve son olarak en basit çözüm:
Uyarı onayı ile:
<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>
Uyarı onayı olmadan:
<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>
Gövde kodu, her iki çözüm için AYNIDIR
<body onload="StartTimers();" onmousemove="ResetTimers();" onKeyPress="ResetTimers();">
Uyarı yerine sayfa üzerinde onay metni ile
Bu, aktif değilse otomatik yüklemenin başka bir yöntemi olduğundan, ona ikinci bir cevap veriyorum. Bu daha basit ve anlaşılması daha kolay.
Sayfada yeniden yükleme onayı ile
<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>
Sayfa onayı ile birlikte kullanıldığında onay kutusu
<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>
Her ikisi için gövde kodları AYNI
<body onmousedown="resetTimeout();" onmouseup="resetTimeout();" onmousemove="resetTimeout();" onkeydown="resetTimeout();" onload="timeoutObject=setTimeout('promptForClose()',timePeriod);">
NOT: Eğer sayfa onayında olmasını istemiyorsanız, kullanım onayı olmadan
<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>
Son etkinlik zamanını takip etmek için LocalStorage'ı kullanarak, yeniden yükleme işlevini aşağıdaki gibi yazabiliriz
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()
}
Ardından, son etkileşim zamanını milisaniye cinsinden (String) kaydeden bir ok işlevi oluşturuyoruz.
const saveLastInteraction = () => window.localStorage.setItem('last', Date.now().toString())
Kaydımızı beforeunloadtemizlemek için olayı tarayıcıda dinlememiz gerekecek, lastinteractionböylece sonsuz bir yeniden yükleme döngüsünde sıkışıp kalmayacağız.
window.addEventListener('beforeunload', () => window.localStorage.removeItem('lastinteraction'))
İzlememiz gereken kullanıcı etkinliği olayları mousemoveve olacaktır keypress. Kullanıcı fareyi hareket ettirdiğinde veya klavyede bir tuşa bastığında son etkileşim zamanını kaydediyoruz
window.addEventListener('mousemove', saveLastInteraction)
window.addEventListener('keypress', saveLastInteraction)
Son dinleyicimizi kurmak için loadetkinliği kullanacağız . Sayfa yüklenirken, setIntervalbelirli bir süre sonra sayfanın süresinin dolup dolmadığını kontrol etmek için işlevi kullanırız .
const expiryDurationMins = 1
window.addEventListener('load', setInterval.bind(null, reloadPage.bind(null, expiryDurationMins), 1000))
Bu görev, html başlık bölümünde aşağıdaki kodu kullanmak çok kolaydır
<head> <meta http-equiv="refresh" content="30" /> </head>
30 saniye sonra sayfanızı yeniler.