Comentário: O HTML5 lançou uma visibilidade da página da API muito "especial". A razão pela qual é especial é que essa API se concentra em um recurso em que poucas pessoas prestam atenção - se a tag do navegador (tab) é ativada
Deve -se explicar aqui que essa "ativação" se refere se a tag está sendo navegada pelo usuário ou se é a tag atual.
Então, qual é o objetivo desta API? Geralmente, muitas páginas tradicionais continuarão a funcionar quando o usuário não a ativar. Por exemplo, quando o usuário estiver navegando no portal de notícias, e a página do jogo da NBA que ele abriu antes continuará atualizando e obtém os resultados mais recentes, o site de vídeo continuará a ocupar largura de banda e carregar recursos. Portanto, se for necessário muito trabalho desnecessário, muitos resíduos de recursos serão causados. Portanto, isso é bastante útil:
1. O programa da Web atualizará automaticamente as informações da página de vez em quando para garantir que o usuário obtenha informações oportunas. No entanto, quando o usuário está navegando em outras páginas, ele pode ser controlado para pausar atualizações.
2. Quando o site de vídeo é exibido em vídeo on -line, ele carrega continuamente o vídeo até que o vídeo seja carregado. No entanto, quando o usuário está navegando em outras páginas, pode pausar o carregamento de recursos de vídeo para salvar a largura de banda.
3. Existe um slide grande na página inicial do site que reproduz automaticamente. Quando o usuário navega em outras páginas, a reprodução pode ser interrompida.
Portanto, através da visibilidade da página, podemos alcançar pelo menos um ou mais dos seguintes benefícios:
1. Salvar recursos do servidor. A pesquisa de Ajax é frequentemente ignorada. Fechar esta solicitação pode salvar recursos.
2. Salve o consumo de memória.
3. Salvar o consumo de largura de banda.
Portanto, o uso da visibilidade da página é benéfico para usuários e servidores.
Em seguida, vamos apresentar formalmente esta API. A visibilidade da página adiciona duas propriedades ocultas e o VisibilityState no objeto de documento do navegador. Se a tag atual for ativada, o valor do documento.Hidden será falso, caso contrário, verdadeiro. O VisibilityState possui 4 valores possíveis:
1.Hidden: Quando o navegador é minimizado, interruptam tags e bloqueia a tela do computador, o valor VisibilityState está oculto
2.Visible: quando o documento do contexto de nível superior do navegador é exibido em pelo menos uma tela, ele retorna visível; Quando a janela do navegador não é minimizada, mas o navegador é bloqueado por outras aplicações, também é visível
3.Prender: Retorna Prerender quando o documento é carregado fora da tela ou é invisível. Esta é uma propriedade não essencial e o navegador pode apoiá-lo seletivamente.
4.UnLoaded: Retorne descarregado quando o documento estiver prestes a ser deixado (descarregar) e o navegador também pode suportar seletivamente essa propriedade.
Além disso, o evento VisibilityCange é adicionado no documento, que é acionado quando a visibilidade do documento muda.
Ok, depois de introduzir as propriedades, coloque um exemplo de uso (copie o código e salve -o em um arquivo HTML, alterne as tags para testar o efeito após a abertura).
<! doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8" />
<title> Teste HTML5 Página API de visibilidade </ititure>
</head>
<Body> </p> <p> <div> </div>
<Cript>
função browserKernel () {
VAR resultado;
['webkit', 'moz', 'o', 'ms']. foreach (function (prefixo) {</p> <p> if (typeof document [prefixo + 'hidden']! = 'indefinido') {
resultado = prefixo;
}
});
resultado de retorno;
}
function init () {
prefixo = BrowSerkernel ();
var showTip = document.getElementById ('showTIP');
document.addeventListener (prefixo + 'visibilidadeChange', função onvisibilityChange (e) {
var dica = nulo;
if (document [prefixo + 'visibilityState'] == 'hidden') tip = '<p> deixe a página </p>';
caso contrário, if (document [prefixo + 'visibilityState'] == 'visível') tip = '<p> digite a página </p>';
showtip.innerhtml = showTip.innerhtml + tip;
});
}
window.onload = init ();
</script>
</body>
</html>
O objetivo deste exemplo é monitorar se a visibilidade da tag altera e gerar um prompt quando a visibilidade da tag mudar.
Vale ressaltar que, atualmente, os navegadores suportam a visibilidade da página por meio de atributos privados. Portanto, ao detectar ou utilizar propriedades fornecidas pela visibilidade da página, você precisa adicionar um prefixo privado do navegador. Por exemplo, ao detectar a propriedade VisibilityState acima no Chrome, você precisa detectar document.webkitVisabilitystate em vez de document.visibilityState. Portanto, a demonstração detectará primeiro o tipo de navegador e depois usará a API de visibilidade da página.