Como verificar se o navegador tem o foco no JavaScript

Escrito por rajeev singh | Traduzido por carlos nascimento
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como verificar se o navegador tem o foco no JavaScript
É uma boa ideia verificar se o navegador está em foco antes de executar funções persistentes (code image by charles taylor from Fotolia.com)

Mais e mais páginas da Web estão incorporando as funções Java Script que executam loops em intervalos regulares, tanto para dar um ping na URL para atualizações como para providenciar maior interatividade do usuário na página. Infelizmente, o JavaScript consome recursos da máquina cliente, incluindo a unidade central de processamento, memória e banda larga.

Com isto em mente, é considerado uma boa prática para programadores não cobrar estes recursos quando o usuário não necessita deles. Uma forma de fazer isso é verificar se o navegador (ou uma aba específica no navegador) tem foco e, consequentemente, se habilita/desabilita funções.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Crie duas funções, uma para quando o navegador estiver em foco e uma para quando o foco estiver fora de ponto:

    var onFocus = function() { // inserir o código para executar quando o windows tiver ganho foco. };

    var onBlur = function() { // inserir o código para executar quando o windows tiver perdido foco. };

  2. 2

    Incorpore a detecção de recursos. essa recomendação é, primeiramente, para o Internet Explorer, mas é melhor utilizar a detecção de recursos do que a detecção de navegador, pois ela é mais confiável para testar diretamente o recurso que você deseja manipular. O Internet Explorer utiliza as propriedades "document.onfocusin" e "document.onfocusout" em vez do "window.onfocus" e "window.onbur", então você precisará verificar se as propriedades de documentos estão definidas:

    if (document.onfocusin !== undefined) { var onfocusin = true; } else { var onfocusin = false; }

  3. 3

    Complete o código ligando os eventos apropriados de foco/desfoque às funções criadas na Etapa 1:

    if (onfocusin === true) { document.onfocusin = onFocus; document.onfocusout = onBlur; } else { window.onfocus = onFocus; window.onblur = onBlur; }

Dicas & Advertências

  • Lembre-se de verificar o seu código em todos os navegadores que seu site suporta antes de levá-la ao ar. O código deste artigo foi testado no Firefox 3.6.6, IE 7, IE 8, Chrome 6.0, Safari 5.0 e Opera 10.53.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível