Exemplo de uso dos novos recursos do HTML5 para monitorar facilmente a chave de retorno de qualquer aplicativo

Hoje em dia, o h5 tem muitos novos recursos, novas tags, novas especificações, etc., e eles estão em constante aprimoramento. O suporte dos principais fornecedores de navegadores também é bastante forte. Como programadores front-end, acho que ainda precisamos prestar atenção ativamente e praticá-lo com coragem. A seguir, compartilharei com vocês um novo recurso muito útil do h5 (não é particularmente novo no momento), que pode monitorar facilmente a chave de retorno de qualquer aplicativo, incluindo a chave de retorno física em máquinas Android, para atender ainda mais necessidades no desenvolvimento do projeto.

Há cerca de meio ano, recebi uma solicitação do PM para usar o h5 puro para realizar a reprodução, pausa e retomada do multi-áudio. A página é colocada no aplicativo Driving Test Guide e não há interação com o cliente. portanto, js relacionados ao cliente não precisam ser referenciados. Parece que este requisito é bastante simples, embora eu nunca tenha feito um requisito semelhante antes. Não importa o que aconteça, basta arregaçar as mangas e fazer. A jornada de aprendizagem começou.

Então, por que devo monitorar? Preciso enfatizar isso continuamente. Seja WeChat, QQ, App ou o navegador de um telefone Apple, quando se trata de áudio e vídeo, o sistema pausará automaticamente a reprodução atual ao retornar à página anterior, mas nem todos os telefones Android podem fazer isso. Portanto, devemos personalizar o monitoramento nós mesmos. Muitos amigos podem pensar primeiro no Baidu, e então a resposta nada mais é do que isso

 pushHistory(); window.addEventListener(popstate, function(e) { alert(ouvi o evento do botão Voltar do navegador); //Implemente suas próprias funções de acordo com suas necessidades}, false); = {título: título, url: # }; window.history.pushState(estado, título, #);

Parece familiar? No entanto, os principais requisitos não puderam ser perfeitamente realizados. Eu estava quebrando a cabeça naquele momento para saber qual era a utilidade desse código. Só quando fui orientado por um grande amigo é que copiei esse código.

 var hiddenProperty = 'oculto' no documento? 'oculto': 'webkitHidden' no documento? 'webkitHidden': 'mozHidden' no documento? );var onVisibilityChange = function(){ if (!document[hiddenProperty]) { console.log('Página inativa'); }else{ console.log('Página ativada') }}document.addEventListener(visibilityChangeEvent, onVisibilityChange);

Todos os problemas estão resolvidos.

Meu entendimento pessoal do princípio deste código é realizar operações relacionadas, determinando se o usuário está navegando na página atual.

Este é o link relacionado ao MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden

Não é que você possa realmente monitorar o botão Voltar integrado no aplicativo por meio de JS, ou mesmo o botão Voltar físico no Android, mas você pode perceber rapidamente suas necessidades mudando seu pensamento. Espero que este recurso possa ajudá-lo.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.