El editor de Downcodes le ofrece una explicación detallada de los eventos de actualización de la página de monitoreo de JavaScript. El monitoreo de los eventos de actualización de la página es crucial en el desarrollo web. Puede ayudar a los desarrolladores a realizar algunas operaciones necesarias cuando la página se actualiza o se cierra, como guardar datos del usuario, enviar solicitudes, etc. Sin embargo, debido a las restricciones de seguridad del navegador, no es fácil distinguir con precisión entre eventos de actualización y cierre de página. Este artículo analizará en profundidad varios métodos comunes y analizará sus ventajas y desventajas para ayudarlo a elegir la opción más adecuada.
JavaScript puede monitorear los eventos de actualización de la página de varias maneras. El método más común es usar los detectores de eventos beforeunload y unload. Sin embargo, es importante tener en cuenta que es técnicamente difícil monitorear únicamente las actualizaciones de la página sin monitorear los eventos de cierre. Debido a las restricciones de seguridad del navegador, estos dos eventos generalmente se activan al mismo tiempo. Sin embargo, con algunos trucos, puede intentar distinguir entre estos dos eventos: por ejemplo, configurando una cookie o usando sessionStorage para registrar el estado, y verificar estos estados cuando el usuario carga la página nuevamente para determinar si la página está cargada debido. para una actualización o un cierre.
Cuando el usuario intenta actualizar la página, se puede realizar cierto nivel de monitoreo a través del evento beforeunload.
window.addEventListener('antes de descargar', función (e) {
//Establece un mensaje de advertencia para mostrar al actualizar
var confirmMessage = '¿Está seguro de que desea actualizar la página? ';
(e || ventana.evento).returnValue = mensaje de confirmación;
mensaje de confirmación de devolución;
});
Este código abrirá un cuadro de diálogo de confirmación cuando el usuario actualice la página. Sin embargo, también se activa cuando el usuario intenta cerrar la página. Por lo tanto, esta no es una forma precisa de diferenciar entre actualización y apagado.
La información de estado del usuario durante la sesión se puede registrar a través de sessionStorage. Solo es válida dentro de la pestaña actual del navegador. Cuando se cierra la pestaña, los datos almacenados en sessionStorage se borrarán.
//Ejecutado cuando se carga la página
ventana.onload = función() {
si (sessionStorage.getItem(is_reloaded)) {
console.log(la página se actualizó);
}
sessionStorage.setItem(is_reloaded, verdadero);
};
window.addEventListener('antes de descargar', función (e) {
si (!ventana.cerrada) {
sessionStorage.removeItem(is_reloaded);
}
});
En este ejemplo, configuramos el elemento is_reloaded en sessionStorage cuando se carga la página. Cuando la página se actualiza, el elemento aún existe, por lo que podemos saber si la página se actualizó marcando is_reloaded. Este método tampoco puede distinguir con precisión la actualización y el cierre, pero combinado con el análisis de los patrones de comportamiento del usuario, puede proporcionar un cierto grado de distinción.
La API de visibilidad de página proporciona la capacidad de detectar si una página es visible para el usuario y también se puede utilizar para determinar indirectamente el comportamiento del usuario.
document.addEventListener('cambio de visibilidad', función() {
if (document.visibilityState === 'oculto') {
// El usuario ha abandonado la página actual, posiblemente cerrándola o saltando
}
si (document.visibilityState === 'visible') {
// La página se vuelve visible, ya sea al abrirla, actualizarla o volver a ella desde otra pestaña
}
});
A través de esta API, puede realizar algún procesamiento cuando el usuario abandona la página y luego emitir un juicio cuando el usuario regresa a la página. Sin embargo, esto no monitorea con precisión solo los eventos de actualización.
Puede configurar una cookie en JavaScript y darle un tiempo de vencimiento corto, verificar si la cookie existe cuando el usuario actualiza y juzgarla según la marca de tiempo:
//Establecer cookies
función setCookie(nombre, valor, segundos) {
var caduca = nueva Fecha(Fecha.ahora() + segundos * 1000);
documento.cookie = nombre + = + valor + ;expires= + expires.toUTCString();
}
// Obtener cookies
función obtenerCookie(nombre) {
var keyValue = document.cookie.match('(^|;) ?' + nombre + '=([^;]*)(;|$)');
devolver valorclave? valorclave[2] : nulo;
}
// Monitorear actualización
ventana.addEventListener('cargar', función() {
var últimoHora = getCookie('last_refresh_time');
var HoraActual = Fecha.ahora();
if (últimahora && hora actual - parseInt(últimahora) < 1000) {
// Si la diferencia entre las dos marcas de tiempo es inferior a 1 segundo, se considera un evento de actualización
console.log (la página se actualizó);
}
setCookie('last_refresh_time', horaactual, 1);
});
Al configurar y verificar la presencia de la cookie y la diferencia con la hora actual, podemos inferir si una página se actualizó o se acaba de abrir. Sin embargo, dado que las cookies pueden abarcar ventanas y pestañas, esta todavía no es una solución perfecta.
1. ¿Cómo monitorear los eventos de actualización de la página a través de JavaScript?
Puede monitorear los eventos de actualización de la página a través de JavaScript para realizar operaciones relacionadas. Una forma es utilizar el evento beforeunload.
window.addEventListener('beforeunload', function(event) { // Código ejecutado antes de actualizar la página // Por ejemplo, enviar solicitudes, guardar datos, etc. });2. ¿Cómo monitorear solo los eventos de actualización de la página pero no los eventos de cierre de la página en JavaScript?
Si solo desea monitorear el evento de actualización de la página pero no el evento de cierre de la página, puede usar los eventos beforeunload y unload en combinación.
window.addEventListener('beforeunload', function(event) { // Código ejecutado antes de actualizar la página // Por ejemplo, enviar solicitudes, guardar datos, etc. }); { // Código ejecutado cuando la página está cerrada // Por ejemplo, limpiar recursos, ahorrar tiempo de salida, etc. });De esta manera, cuando el usuario actualice la página, se activará el evento beforeunload, y cuando el usuario cierre la página, se activarán tanto el evento beforeunload como el de descarga.
3. ¿Cómo monitorear solo los eventos de actualización de páginas web en JavaScript y excluir el monitoreo de otros métodos de navegación?
Si solo desea monitorear el evento de actualización de la página web, pero no otros métodos de navegación (como hacer clic en un enlace o hacer clic en el botón adelante/atrás), puede usar el evento beforeunload junto con la interfaz PerformanceNavigation.
window.addEventListener('beforeunload', function(event) { // Determinar si se trata de un evento de actualización de la página web if (performance.navigation.type === performance.navigation.TYPE_RELOAD) { // Código ejecutado antes de actualizar la página // Por ejemplo Enviar solicitudes, guardar datos y otras operaciones}});Utilice performance.navigation.type para determinar el tipo de navegación. Si es TYPE_RELOAD, significa que la página se activa mediante una operación de actualización. De esta forma, el código correspondiente se ejecutará únicamente en el evento de actualización de la página web.
Espero que el contenido anterior pueda ayudarlo a comprender mejor el método de monitoreo de eventos de actualización de páginas de JavaScript. El editor de Downcodes le recuerda que en las aplicaciones reales, debe elegir el método apropiado según las necesidades específicas y manejar la compatibilidad.