how to force reload of web page every five minutes only if active

Question

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 accomplish this using Javascript? Any help appreciated.

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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.