htmlpage-refresh

Refresh page when active tab


Currently in my page I am using this to refresh the page each minute:

<head>
...
<meta http-equiv="refresh" content="60" />
...
</head>

How instead, I want to refresh the page when a user presses the tab. Lets say a user has multiple tabs open in the web browser. And he uses a few minutes surfing on another tab. When he then press the tab for my website, I want the page to autorefresh, so the user don't have to do it himself to check for any updates on the page. How can I accomplish this?


Solution

  • you should use js and visibility API:

    include this small script in your html page:

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

    Adapted from here: Event for when user switches browser tabs