Cara memuat ulang halaman secara otomatis setelah periode tidak aktif yang diberikan

Bagaimana saya dapat memuat ulang halaman web secara otomatis, jika tidak ada aktivitas pada halaman tersebut untuk jangka waktu tertentu?

Jika Anda ingin me-refresh halaman jika tidak ada aktivitas maka Anda perlu mencari cara untuk mendefinisikan aktivitas. Katakanlah kita me-refresh halaman setiap menit kecuali seseorang menekan tombol atau menggerakkan mouse. Ini menggunakan jQuery untuk pengikatan acara:

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

Ini dapat dilakukan tanpa javascript, dengan metatag ini:

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

di mana konten = "5" adalah detik-detik di mana halaman akan menunggu sampai di-refresh.

Tetapi Anda mengatakan hanya jika tidak ada aktivitas, aktivitas seperti apa itu?

Saya telah membangun solusi javascript lengkap juga yang tidak memerlukan jquery. Mungkin bisa mengubahnya menjadi plugin. Saya menggunakannya untuk cairan menyegarkan otomatis, tetapi sepertinya itu bisa membantu Anda di sini.

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>

Di atas akan menyegarkan halaman setiap 10 menit kecuali resetTimeout () dipanggil. Sebagai contoh:

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

Berdasarkan jawaban arturnt yang diterima. Ini adalah versi yang sedikit dioptimalkan, tetapi pada dasarnya melakukan hal yang sama:

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

Satu-satunya perbedaan adalah bahwa versi ini menggunakan setIntervalalih-alih setTimeout, yang membuat kode lebih kompak.

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

Setiap kali Anda menggerakkan mouse itu akan memeriksa kapan terakhir kali Anda memindahkan mouse. Jika interval waktu lebih besar dari 20 'itu akan memuat ulang halaman, selain itu akan memperbarui waktu-terakhir-Anda-pindah-mouse-.

Muat ulang secara otomatis dengan target pilihan Anda. Dalam hal ini target _selfditetapkan untuk dirinya sendiri, tetapi Anda dapat mengubah halaman memuat ulang dengan hanya mengubah window.open('self.location', '_self');kode ke sesuatu seperti contoh ini window.top.location="window.open('http://www.YourPageAdress.com', '_self'";.

Dengan pesan ALERT konfirmasi:

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

Tanpa peringatan konfirmasi:

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

Kode tubuh adalah SAMA untuk kedua solusi:

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

gunakan setIntervalmetode JavaScript :

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

Ya sayang, maka Anda harus menggunakan teknologi Ajax. untuk mengubah konten tag html tertentu:

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

Saya akan mempertimbangkan activityapakah pengguna berfokus pada jendela atau tidak. Misalnya, ketika Anda mengklik dari satu jendela ke jendela lain (misalnya Google Chrome ke iTunes, atau Tab 1 ke Tab 2 dalam browser internet), halaman web dapat mengirim panggilan balik yang mengatakan "Saya tidak fokus!" atau "Aku dalam fokus!". Orang dapat menggunakan jQuery untuk memanfaatkan kemungkinan kurangnya aktivitas ini untuk melakukan apa pun yang mereka inginkan. Jika saya berada di posisi Anda, saya akan menggunakan kode berikut untuk memeriksa fokus setiap 5 detik, dll dan memuat ulang jika tidak ada fokus.

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

Dan akhirnya solusi paling sederhana:

Dengan konfirmasi lansiran:

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

Tanpa konfirmasi peringatan:

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

Kode tubuh adalah SAMA untuk kedua solusi

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

Dengan teks konfirmasi pada halaman alih-alih peringatan

Karena ini adalah metode lain untuk memuat otomatis jika tidak aktif saya memberikan jawaban kedua. Yang ini lebih sederhana dan lebih mudah dimengerti.

Dengan memuat ulang konfirmasi pada halaman

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

Kotak konfirmasi ketika digunakan dengan konfirmasi pada halaman

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

Kode tubuh untuk keduanya adalah SAMA

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

CATATAN: Jika Anda tidak ingin memiliki konfirmasi pada halaman, gunakan Tanpa konfirmasi

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

Menggunakan LocalStorage untuk melacak aktivitas terakhir kali, kita dapat menulis fungsi reload sebagai berikut

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

Kemudian kita membuat fungsi panah yang menyimpan waktu interaksi terakhir dalam milidetik (String)

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

Kita perlu mendengarkan beforeunloadacara di browser untuk menghapus lastinteractioncatatan kita sehingga kita tidak terjebak dalam loop reload yang tak terbatas.

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

Peristiwa aktivitas pengguna yang perlu kita pantau adalah mousemovedan keypress. Kami menyimpan waktu interaksi terakhir ketika pengguna menggerakkan mouse atau menekan tombol pada keyboard

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

Untuk mengatur pendengar terakhir kami, kami akan menggunakan loadacara tersebut. Pada pemuatan halaman, kami menggunakan setIntervalfungsi untuk memeriksa apakah halaman telah kedaluwarsa setelah periode tertentu.

const expiryDurationMins = 1

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

Tugas ini sangat mudah menggunakan kode berikut di bagian header html

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

Ini akan menyegarkan halaman Anda setelah 30 detik.