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);
  
  }

Answer 2

Well, there is no strict connection between models defined in the backend and frontend in this case. The connection is just made when a client calls an endpoint on a server. The most common practice is to use DTO as returned data(Data Transfer Object) with all properties which you need on the front, not models. So on the frontend, you create the same class as DTO on the backend and you just use some libs to support the process of mapping like the automapper. In this case detection of using models needs to be found by URL.