Comentário: Há muito tempo que faltam um método para determinar se um usuário está navegando em uma guia especificada. Os usuários visitaram outros sites? Eles trocaram de volta?
Agora, a interface de visibilidade da página no HTML5 fornece aos programadores um método para usar o evento VisibilityChange Page para julgar o status atual da visibilidade da página e executar determinadas tarefas de maneira direcionada. Há também um novo documento.Hidden Property que pode ser usado.
document.hidden
Este documento recém-comparado.
Document.VisibilityState
O valor do VisibilityState é visível (indica que a página está atualmente ativada pelo navegador e a janela não é minimizada) ou oculta (a página não é atualmente ativada pela página da guia ou a janela é minimizada.) Ou Prerender (a página está regenerando e não é visível para o usuário.).
Evento do VisibilityCange
É muito fácil ouvir alterações de visibilidade da página:
// compatível com vários navegadores
var oculto, Estado, VisibilityChange;
if (typeof document.hidden! == "indefinido") {
Hidden = "Hidden";
VisibilityCange = "VisibilityChange";
state = "visibilityState";
} else if (typeof document.mozhidden! == "indefinido") {
hidden = "mozhidden";
VisibilityCange = "MozvisibilityChange";
state = "mozvisibilityState";
} else if (typeof document.mshidden! == "indefinido") {
hidden = "mshidden";
VisibilityCange = "MsVisibilityChange";
state = "msVisibilityState";
} else if (typeof document.webkithdidden! == "indefinido") {
hidden = "webkithidden";
visibilidadeChange = "webkitvisibilityCange";
state = "webkitvisibilityState";
} </p> <p> // Adicione um ouvinte para exibir alterações de status no título
document.addeventListener (visibilidadeChange, function () {
document.title = document [estado];
}, false); </p> <p> // inicialização
document.title = document [estado];
O código acima modificará o valor do documento.TITLE quando a visibilidade da página mudar!
Então, quando você precisa usar o evento VisibilityCange? Por exemplo, se houver um vídeo incorporado na sua página que está sendo reproduzido, quando o usuário mudar para outra guia, o vídeo na sua guia deve pausar automaticamente a reprodução e continuar a ser reproduzido quando o usuário voltar. Por exemplo, se a sua página tiver uma ação automática de atualização, quando o usuário mudar para outras guias, você deve parar de atualizar e continuar a ação anterior quando o usuário voltar.