I would like to have my web-app reload html every 5 minutes. One way I can do that is by using adding HTML header:
<meta http-equiv="refresh" content="300" />
But this has an issue that even if the page in question is not active, it will go on reloading all the time. By active, I mean the browser window is on foreground and the page is the currently active tab.
How to acplish this using Javascript? Any help appreciated.
I would like to have my web-app reload html every 5 minutes. One way I can do that is by using adding HTML header:
<meta http-equiv="refresh" content="300" />
But this has an issue that even if the page in question is not active, it will go on reloading all the time. By active, I mean the browser window is on foreground and the page is the currently active tab.
How to acplish this using Javascript? Any help appreciated.
Share Improve this question asked Feb 10, 2010 at 6:45 ShameemShameem 14.3k13 gold badges42 silver badges43 bronze badges5 Answers
Reset to default 4Browser DOM can't tell you if the page is the current active tab in the browser, much less that the browser is the current active application on the desktop. You can perhaps monitor mouseover events to infer that the page has the user's attention.
You have to first define what 'active' means.
By any standard measurement, activity has to do with interaction with the website, which would be refreshing the page anyway.
Updated Thanks for the clarification.
I don't think offhand that it's possible generally to detect from javascript whether the browser is the active window, and if the page is the currently selected tab.
There may be browser specific tricks but I don't know of any.
I think your approach is the best you can get. I don't believe there is a way to check from within a page, whether the window/tab it's on is active or not.
You can have the 'active' flag set by key press or mouse activity/movement over the page body. For every press/click/movement, reset a countdown timer (5 min) to refresh the page via javascript.
You can't really detect directly if the browser window is in the foreground or the page is the at active tab.
Your approach is best for what you want to.. This can not be done automatically other ways... To activate auto refresh function, you either have to press a key or have to click on document.
document.addEventListener("keydown",refresh);
document.addEventListener("click",refresh);
function refresh(){
setTimeout(function(){
location.reload();
},300000);
}
Or a body onload can be used which will trigger refresh timer after page is loaded
<body onload="setTimeout(refresh,300000)">
<h1>HTML DOCUMENT</h1>
<script>
function refresh(){
location.reload();
}
</script>
</body>