Necesito ejecutar alguna acción solo cuando la pestaña es la pestaña activa/actual en una ventana del navegador determinada.
Intenté esto:
let intID = setInterval(()=>{ if(document.visibilityState == "visible"){ //doSomething(); } }, 1000);y esto:
let intID = setInterval(()=>{ if(!document.hidden){ //doSomething(); } }, 1000);Ambos ejemplos anteriores no funcionan si la ventana del navegador está cubierta por otra ventana maximizada. Por lo que pude entender de otros artículos en la web, el enfoque y el desenfoque tampoco hacen el trabajo. Específicamente necesito algo que funcione incluso en una ventana completamente cubierta o incluso minimizada.
Podemos usar la API de visibilidad , vea la referencia aquí, incluido este ejemplo que hice para usted
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); }