O editor de Downcodes traz para você uma explicação detalhada dos eventos de atualização de página de monitoramento de JavaScript. O monitoramento de eventos de atualização de página é crucial no desenvolvimento web. Ele pode ajudar os desenvolvedores a realizar algumas operações necessárias quando a página é atualizada ou fechada, como salvar dados do usuário, enviar solicitações, etc. No entanto, devido às restrições de segurança do navegador, não é fácil distinguir com precisão entre eventos de atualização de página e fechamento. Este artigo examinará detalhadamente vários métodos comuns e analisará suas vantagens e desvantagens para ajudá-lo a escolher a opção mais adequada.
JavaScript pode monitorar eventos de atualização de página de várias maneiras. O método mais comum é usar ouvintes de eventos beforeunload e unload. No entanto, é importante observar que é tecnicamente difícil monitorar apenas as atualizações de páginas sem monitorar os eventos de fechamento. Devido às restrições de segurança do navegador, esses dois eventos geralmente são acionados ao mesmo tempo. No entanto, com alguns truques, você pode tentar distinguir entre esses dois eventos: por exemplo, definindo um cookie ou usando sessionStorage para registrar o status e verificar esses status quando o usuário carregar a página novamente para determinar se a página foi carregada devido para uma atualização ou encerramento.
Quando o usuário tenta atualizar a página, algum nível de monitoramento pode ser feito por meio do evento beforeunload.
window.addEventListener ('antes de descarregar', função (e) {
//Define uma mensagem de aviso para ser exibida durante a atualização
var confirmMessage = 'Tem certeza que deseja atualizar a página? ';
(e || janela.event).returnValue = confirmMessage;
retornar mensagem de confirmação;
});
Este código exibirá uma caixa de diálogo de confirmação quando o usuário atualizar a página. No entanto, também é acionado quando o usuário tenta fechar a página. Portanto, esta não é uma forma precisa de diferenciar entre atualização e desligamento.
As informações de status do usuário durante a sessão podem ser registradas através do sessionStorage. Só é válido na aba atual do navegador. Quando a aba for fechada, os dados armazenados no sessionStorage serão apagados.
//Executado quando a página carrega
janela.onload=função(){
if (sessionStorage.getItem(is_reloaded)) {
console.log(a página foi atualizada);
}
sessionStorage.setItem(is_reloaded, verdadeiro);
};
window.addEventListener ('antes de descarregar', função (e) {
if (!window.closed) {
sessionStorage.removeItem(is_reloaded);
}
});
Neste exemplo, definimos o item is_reloaded em sessionStorage quando a página é carregada. Quando a página é atualizada, o item ainda existe, então podemos saber se a página foi atualizada verificando is_reloaded. Este método também não consegue distinguir com precisão a atualização e o fechamento, mas combinado com a análise dos padrões de comportamento do usuário, pode fornecer um certo grau de distinção.
A API Page Visibility fornece a capacidade de detectar se uma página está visível para o usuário e também pode ser usada para determinar indiretamente o comportamento do usuário.
document.addEventListener('mudança de visibilidade', function() {
if (document.visibilityState === 'oculto') {
// O usuário saiu da página atual, possivelmente fechando ou pulando
}
if (document.visibilityState === 'visível') {
// A página fica visível ao abrir, atualizar ou voltar de outra guia
}
});
Por meio dessa API, você pode fazer algum processamento quando o usuário sai da página e, em seguida, fazer um julgamento quando o usuário retornar à página. No entanto, isso não monitora com precisão apenas os eventos de atualização.
Você pode definir um cookie em JavaScript e dar-lhe um curto período de expiração, verificar se o cookie existe quando o usuário atualiza e julgá-lo com base no carimbo de data/hora:
//Definir cookies
function setCookie(nome, valor, segundos) {
var expira = new Date(Date.now() + segundos * 1000);
document.cookie = nome + = + valor + ;expira= + expira.toUTCString();
}
//Obter biscoitos
function getCookie(nome) {
var keyValue = document.cookie.match('(^|;) ?' + nome + '=([^;]*)(;|$)');
retornar valorchave? valorchave[2]: nulo;
}
//Atualização do monitor
window.addEventListener('carregar', function() {
var lastTime = getCookie('last_refresh_time');
var currentTime = Date.now();
if (lastTime && currentTime - parseInt(lastTime) <1000) {
// Se a diferença entre os dois timestamps for menor que 1 segundo, é considerado um evento de atualização
console.log(a página foi atualizada);
}
setCookie('last_refresh_time', currentTime, 1);
});
Ao definir e verificar a presença do cookie e a diferença em relação à hora atual, poderemos inferir se uma página foi atualizada ou acabou de ser aberta. No entanto, como os cookies podem abranger janelas e guias, esta ainda não é uma solução perfeita.
1. Como monitorar eventos de atualização de página através de JavaScript?
Você pode monitorar eventos de atualização de página por meio de JavaScript para executar operações relacionadas. Uma maneira é usar o evento beforeunload.
window.addEventListener('beforeunload', function(event) { // Código executado antes da atualização da página // Por exemplo, envio de solicitações, salvamento de dados, etc. });2. Como monitorar apenas eventos de atualização de página, mas não eventos de fechamento de página em JavaScript?
Se desejar monitorar apenas o evento de atualização da página, mas não o evento de fechamento da página, você poderá usar os eventos beforeunload e unload em combinação.
window.addEventListener('beforeunload', function(event) { // Código executado antes da página ser atualizada // Por exemplo, enviar solicitações, salvar dados, etc. }); { // Código executado quando a página é fechada // Por exemplo, limpando recursos, economizando tempo de saída, etc. });Desta forma, quando o usuário atualizar a página, o evento beforeunload será acionado, e quando o usuário fechar a página, serão acionados tanto o evento beforeunload quanto o unload.
3. Como monitorar apenas eventos de atualização de páginas da web em JavaScript, excluindo o monitoramento de outros métodos de navegação?
Se desejar monitorar apenas o evento de atualização da página da Web, mas não outros métodos de navegação (como clicar em um link ou clicar no botão avançar/voltar), você poderá usar o evento beforeunload em conjunto com a interface PerformanceNavigation.
window.addEventListener('beforeunload', function(event) { // Determine se é um evento de atualização de página da web if (performance.navigation.type === performance.navigation.TYPE_RELOAD) { // Código executado antes da página ser atualizada // Por exemplo Enviar solicitações, salvar dados e outras operações}});Use performance.navigation.type para determinar o tipo de navegação. Se for TYPE_RELOAD, significa que a página é acionada por uma operação de atualização. Desta forma, o código correspondente será executado apenas no evento de atualização da página web.
Espero que o conteúdo acima possa ajudá-lo a entender melhor o método de monitoramento de eventos de atualização de página JavaScript. O editor de Downcodes lembra que em aplicações reais é necessário escolher o método adequado de acordo com as necessidades específicas e cuidar da compatibilidade.