উত্তর:
কোনও ক্রিয়াকলাপ না থাকলে আপনি যদি পৃষ্ঠাটি রিফ্রেশ করতে চান তবে আপনাকে কীভাবে কার্যকলাপ সংজ্ঞায়িত করতে হবে তা নির্ধারণ করতে হবে। ধরা যাক আমরা প্রতি মিনিটে পৃষ্ঠাটি রিফ্রেশ করি যদি না কেউ চাবি চাপায় বা মাউসটি সরিয়ে না দেয়। এটি ইভেন্ট বন্ডিংয়ের জন্য 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>
<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ব্যবহারকারী উইন্ডোতে ফোকাস করছে কিনা তা আমি বিবেচনা করব । উদাহরণস্বরূপ, আপনি যখন একটি উইন্ডো থেকে অন্য উইন্ডোতে ক্লিক করেন (যেমন গুগল ক্রোম থেকে আইটিউনস, বা একটি ইন্টারনেট ব্রাউজারের মধ্যে ট্যাব 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>উভয় সমাধানের জন্য বডি কোড একই
<body onload="StartTimers();" onmousemove="ResetTimers();" onKeyPress="ResetTimers();">সতর্কতার পরিবর্তে পৃষ্ঠা নিশ্চিতকরণ পাঠ্য সহ
যেহেতু নিষ্ক্রিয় থাকলে অটো লোড করার এটি অন্য পদ্ধতি I এটি আরও সহজ এবং বুঝতে সহজ to
পৃষ্ঠায় পুনরায় লোড নিশ্চিতকরণ সহ
<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>ক্রিয়াকলাপের শেষ সময়টি ট্র্যাক রাখতে লোকালস্টোরেশন ব্যবহার করে, আমরা নীচে পুনরায় লোড ফাংশনটি লিখতে পারি
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))এই কাজটি খুব সহজ এইচটিএমএল শিরোলেখ বিভাগে কোড অনুসরণ করে very
<head> <meta http-equiv="refresh" content="30" /> </head>এটি 30 সেকেন্ড পরে আপনার পৃষ্ঠা রিফ্রেশ হবে।