How to determine if a tab is the active (current) tab of a given browser window?

Question

I need to execute some action only when the tab is the active/current tab in a given browser window.

I tried this:

let intID = setInterval(()=>{
  if(document.visibilityState == "visible"){
    //doSomething();
  }
}, 1000);

and this:

let intID = setInterval(()=>{
  if(!document.hidden){
    //doSomething();
  }
}, 1000);

Both the above examples don't work if the browser window is covered by another maximized window. As far as I could understand from other articles on the web, focus and blur don't do the job either. I specifically need something that will work even in a completely covered or even minimized window.

Answer 1

We can use the Visibility API, see the reference here, including this example I made for you

https://jsfiddle.net/74xoqhza/

    // Set the name of the hidden property and the change event for visibility
  var hidden, visibilityChange;
  if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
    hidden = "hidden";
    visibilityChange = "visibilitychange";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
  } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
  }
  
  
  // If the page is hidden, pause the video;
  // if the page is shown, play the video
  function handleVisibilityChange() {
    if (document[hidden]) {
      console.log('is hidden');
    } else {
      console.log('is focused');
    }
  }
  
  // Warn if the browser doesn't support addEventListener or the Page Visibility API
  if (typeof document.addEventListener === "undefined" || hidden === undefined) {
    console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
  } else {
    // Handle page visibility change
    document.addEventListener(visibilityChange, handleVisibilityChange, false);
  
  }