Como saber se o navegador / guia está ativo

Duplicar Possível:
Existe uma maneira de detectar se uma janela do navegador não está ativa no momento?

Eu tenho uma function que é chamada a cada segundo que eu só quero executar se a página atual está em primeiro plano, ou seja, o usuário não minimizou o navegador ou mudou para outra guia. Não serve para nada se o usuário não está olhando para ele e é potencialmente com uso intensivo de CPU, então eu não quero apenas perder ciclos em segundo plano.

Alguém sabe como dizer isso em JavaScript?

Nota: eu uso jQuery, então se sua resposta usa isso, tudo bem :).

Você usaria os events de focus e blur da janela:

 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 ao problema comentado de “Double Fire” e ficar dentro da facilidade de uso do 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); }) 

Clique para ver o Código Exemplo Mostrando-o funcionando (JSFiddle)

Além da resposta de Richard Simões, você também pode usar a API de visibilidade da página .

 if (!document.hidden) { // do what you need } 

Essa especificação define um meio para que os desenvolvedores de sites determinem programaticamente o estado de visibilidade atual da página, a fim de desenvolver aplicativos da Web eficientes e eficientes em termos de CPU.

Saber mais

Eu tentaria definir uma bandeira nos events window.onblur e window.onblur .

O snippet a seguir foi testado no Firefox, Safari e Chrome, abra o console e mova-se entre as guias para trás e para frente:

 var isTabActive; window.onfocus = function () { isTabActive = true; }; window.onblur = function () { isTabActive = false; }; // test setInterval(function () { console.log(window.isTabActive ? 'active' : 'inactive'); }, 1000); 

Experimente aqui .

Usando jQuery:

 $(function() { window.isActive = true; $(window).focus(function() { this.isActive = true; }); $(window).blur(function() { this.isActive = false; }); showIsActive(); }); function showIsActive() { console.log(window.isActive) window.setTimeout("showIsActive()", 2000); } function doWork() { if (window.isActive) { /* do CPU-intensive stuff */} } 

Todos os exemplos aqui (com exceção do rockacola) exigem que o usuário clique fisicamente na janela para definir o foco. Isso não é ideal, então .hover() é a melhor escolha:

 $(window).hover(function(event) { if (event.fromElement) { console.log("inactive"); } else { console.log("active"); } }); 

Isso lhe dirá quando o usuário tiver o mouse na canvas, embora ele ainda não diga se ele está em primeiro plano com o mouse do usuário em outro lugar.

Se você está tentando fazer algo semelhante à página de pesquisa do Google quando aberto no Chrome, (onde determinados events são acionados quando você ‘se concentra’ na página), o evento hover () pode ajudar.

 $(window).hover(function() { // code here... });