जवाबों:
यदि आप पृष्ठ को ताज़ा करना चाहते हैं यदि कोई गतिविधि नहीं है, तो आपको यह पता लगाने की आवश्यकता है कि गतिविधि को कैसे परिभाषित किया जाए। मान लीजिए कि हम हर मिनट पृष्ठ को ताज़ा करते हैं जब तक कि कोई कुंजी दबाता है या माउस को स्थानांतरित नहीं करता है। यह इवेंट बाइंडिंग के लिए 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>यह जावास्क्रिप्ट के बिना पूरा किया जा सकता है, इस मेटाटैग के साथ:
<meta http-equiv="refresh" content="5" >जहां सामग्री = "5" वे सेकंड हैं जो पृष्ठ ताज़ा होने तक प्रतीक्षा करेंगे।
लेकिन आपने कहा कि अगर कोई गतिविधि नहीं होती है, तो गतिविधि किस तरह की होगी?
setInterval, इसलिए यह जानकर खुशी हुई कि यह मौजूद है!
मैंने एक संपूर्ण जावास्क्रिप्ट समाधान बनाया है और साथ ही इसमें jquery की आवश्यकता नहीं है। इसे एक प्लगइन में बदलने में सक्षम हो सकता है। मैं इसे द्रव ऑटो-रिफ्रेशिंग के लिए उपयोग करता हूं, लेकिन ऐसा लगता है कि यह यहां आपकी मदद कर सकता है।
// 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 मिनट में पेज ताज़ा होगा। उदाहरण के लिए:
<a href="javascript:;" onclick="resetTimeout();">clicky</a>आर्टर्नट के स्वीकृत उत्तर के आधार पर। यह थोड़ा अनुकूलित संस्करण है, लेकिन अनिवार्य रूप से एक ही बात करता है:
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, जो कोड को अधिक कॉम्पैक्ट बनाता है।
1000यदि आप इसका उपयोग करके गणना कर रहे हैं तो आप अंतराल क्यों सेट करेंगे 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();
}
}हर बार जब आप माउस को हिलाते हैं तो यह आखिरी बार जाँच करेगा कि आपने माउस को स्थानांतरित किया है। यदि समय अंतराल 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विधि का उपयोग करें :
setInterval(function(){ location.reload(); }, 3000);हां प्रिय, तो आपको अजाक्स तकनीक का उपयोग करना होगा। विशेष 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 क्रोम से iTunes, या टैब 1 से टैब 2 एक इंटरनेट ब्राउज़र के भीतर), तो वेबपेज एक कॉलबैक भेज सकता है जिसमें कहा जा सकता है "Im out of focus!" या "इम फोकस में!"। जो कुछ भी वे चाहते थे करने के लिए गतिविधि के इस संभावित अभाव का दोहन करने के लिए 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>दोनों के लिए बॉडी कोड 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>गतिविधि के अंतिम समय का ट्रैक रखने के लिए लोकलस्टोरेज का उपयोग करके, हम निम्न प्रकार से रीलोड फ़ंक्शन लिख सकते हैं
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()
}फिर हम एक एरो फंक्शन बनाते हैं जो मिलिसेकंड्स (स्ट्रिंग) में इंटरैक्शन के अंतिम समय को बचाता है
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 सेकंड के बाद आपके पेज को रिफ्रेश करेगा।