Cómo saber si el navegador/pestaña está activo [duplicado]
Posible duplicado:
¿Existe alguna forma de detectar si una ventana del navegador no está activa actualmente?
Tengo una función que se llama cada segundo y que solo quiero ejecutar si la página actual está en primer plano, es decir, el usuario no ha minimizado el navegador ni ha cambiado a otra pestaña. No sirve de nada si el usuario no lo está mirando y potencialmente consume mucha CPU, por lo que no quiero simplemente desperdiciar ciclos en segundo plano.
¿Alguien sabe cómo decir esto en JavaScript?
Nota: uso jQuery, así que si tu respuesta usa eso, está bien :).
Además de la respuesta de Richard Simões, también puede utilizar la API de visibilidad de página .
if (!document.hidden) {
// do what you need
}
Esta especificación define un medio para que los desarrolladores de sitios determinen mediante programación el estado de visibilidad actual de la página para desarrollar aplicaciones web eficientes en cuanto a potencia y CPU.
Más información (actualización de 2019)
- Todos los navegadores modernos son compatibles
document.hidden - http://davidwalsh.name/page-visibility
- https://developers.google.com/chrome/whitepapers/pagevisibility
- Ejemplo de pausar un video cuando la ventana/pestaña está oculta
https://web.archive.org/web/20170609212707/http://www.samdutton.com/pageVisibility/
Usarías los eventos focusy blurde la ventana:
var interval_id;
$(window).focus(function() {
if (!interval_id)
interval_id = setInterval(hard_work, 1000);
});
$(window).blur(function() {
clearInterval(interval_id);
interval_id = 0;
});
Para responder al problema comentado de "Double Fire" y mantener la facilidad de uso de jQuery:
$(window).on("blur focus", function(e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
switch (e.type) {
case "blur":
// do work
break;
case "focus":
// do work
break;
}
}
$(this).data("prevType", e.type);
})
Haga clic para ver el código de ejemplo que muestra que funciona (JSFiddle)
