Auto refresh on active internet browser tab

Question

I have seen this used on a few websites, but can't find the answer.

Let's say you open up a website_A.com and you DON'T close it.

then you go to another tab (website_B.com). You browse there for a while...

Then you click back on website_A.com tab and the website automatically refreshes.

I know there's:

<meta http-equiv="refresh" content="180">

but it refreshes a website after a fixed amount of time.

How to refresh when the browser detects that you are back browsing the website?

Need help.

I think `window.onfocus` should work, https://stackoverflow.com/questions/7389328/detect-if-browser-tab-has-focus/46719827 — Ayoub, Mar 24 '21 at 22:36
I think this might do the work: `document.addEventListener("visibilitychange", () => window.location.reload());` — Manas Khandelwal, Mar 24 '21 at 22:37

score 2 · Answer 1 · answered Mar 24 '21 at 23:36

Found a solution (Thanks to Manas Khandelwal).

Just put this anywhere on your site:

<script>
document.addEventListener("visibilitychange", function() {
   if (document.hidden){
       console.log("Browser tab is hidden")
   } else {
       console.log("Browser tab is visible")
       location.reload();
   }
});
</script>

Auto refresh on active internet browser tab

1 Answers1