วิธีโหลดหน้าเว็บซ้ำอัตโนมัติหลังจากไม่มีการใช้งานตามระยะเวลาที่กำหนด

ฉันจะโหลดหน้าเว็บโดยอัตโนมัติใหม่ได้อย่างไรหากไม่มีกิจกรรมบนหน้าเว็บในช่วงเวลาที่กำหนด

หากคุณต้องการรีเฟรชหน้าเว็บหากไม่มีกิจกรรมคุณต้องหาวิธีกำหนดกิจกรรม สมมติว่าเรารีเฟรชหน้าทุกนาทีเว้นแต่มีคนกดคีย์หรือเลื่อนเมาส์ สิ่งนี้ใช้ 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>

รหัสร่างกายคือ SAME สำหรับโซลูชันทั้งสอง:

<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 หรือแท็บ 1 ถึงแท็บ 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>

รหัสร่างกายคือ SAME สำหรับโซลูชันทั้งสอง

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

รหัสร่างกายสำหรับทั้งคู่คือ SAME

<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 วินาที