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