Stop auto refresh when page is out of focus and minimized on win and mac for all browsers

Question

I have a scenario where i want to stop auto refresh of page in the following cases:

It is out of focus
Browser is minimized.

I am able to do first but especially on mac I'm unable to figure out the way.

Any help will be appreciated.

I have a function written which gets called after every 1 min, i want to make sure that function only makes ajax call when page is in focus — user2028602, Feb 24 '14 at 06:05

score 0 · Answer 1 · edited May 23 '17 at 12:10

Not sure about what you tried, but if you want to find browser window inactive state you can use the Page Visibility API which allows us to detect when a page is hidden to the user.

NOTE: (from w3.org)

This specification defines a means for site developers to programmatically determine the current visibility state of the page in order to develop power and CPU efficient web applications.

You have to register for visibilitychange event, the sample code looks like:

<!DOCTYPE html>
<html>
 <head>
  <script>
   var timer = 0;
   var PERIOD_VISIBLE = 1000;
   var PERIOD_NOT_VISIBLE = 60000;

   function onLoad() {
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
       if(document.addEventListener) document.addEventListener("visibilitychange", visibilityChanged);
   }

   function visibilityChanged() {
       clearTimeout(timer);
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
   }

   function checkEmail() { 
       // Check server for new messages
   }

  </script>
 </head>
 <body onload="onLoad()">
 </body>
</html>

Check already answered Stack overflow question for Reference:

Is there a way to detect if a browser window is not currently active

Stop auto refresh when page is out of focus and minimized on win and mac for all browsers

1 Answers1