L'éditeur de Downcodes vous apporte une explication détaillée des événements d'actualisation des pages de surveillance JavaScript. La surveillance des événements d'actualisation de page est cruciale dans le développement Web. Elle peut aider les développeurs à effectuer certaines opérations nécessaires lorsque la page est actualisée ou fermée, telles que la sauvegarde des données utilisateur, l'envoi de requêtes, etc. Cependant, en raison des restrictions de sécurité du navigateur, il n'est pas facile de faire la distinction avec précision entre les événements d'actualisation de page et de fermeture. Cet article examinera en profondeur plusieurs méthodes courantes et analysera leurs avantages et inconvénients pour vous aider à choisir l’option la plus appropriée.
JavaScript peut surveiller les événements d'actualisation de page de plusieurs manières. La méthode la plus courante consiste à utiliser les écouteurs d'événements beforeunload et unload. Cependant, il est important de noter qu'il est techniquement difficile de surveiller uniquement les actualisations de pages sans surveiller les événements de fermeture. En raison des restrictions de sécurité du navigateur, ces deux événements sont généralement déclenchés en même temps. Cependant, avec quelques astuces, vous pouvez essayer de faire la distinction entre ces deux événements : par exemple, en définissant un cookie ou en utilisant sessionStorage pour enregistrer le statut, et vérifier ces statuts lorsque l'utilisateur charge à nouveau la page pour déterminer si la page est chargée en raison à un rafraîchissement ou à une clôture.
Lorsque l'utilisateur tente d'actualiser la page, un certain niveau de surveillance peut être effectué via l'événement beforeunload.
window.addEventListener('beforeunload', fonction (e) {
//Définit un message d'avertissement à afficher lors de l'actualisation
var confirmationMessage = 'Êtes-vous sûr de vouloir actualiser la page ? ';
(e || window.event).returnValue = confirmationMessage;
renvoyer le message de confirmation ;
});
Ce code fera apparaître une boîte de dialogue de confirmation lorsque l'utilisateur actualisera la page. Cependant, il se déclenche également lorsque l'utilisateur tente de fermer la page. Il ne s’agit donc pas d’une manière précise de faire la différence entre l’actualisation et l’arrêt.
Les informations sur l'état de l'utilisateur pendant la session peuvent être enregistrées via sessionStorage. Elles ne sont valables que dans l'onglet actuel du navigateur. Lorsque l'onglet est fermé, les données stockées dans sessionStorage seront effacées.
//Exécuté au chargement de la page
window.onload = fonction() {
if (sessionStorage.getItem(is_reloaded)) {
console.log(la page a été actualisée) ;
}
sessionStorage.setItem(is_reloaded, true);
} ;
window.addEventListener('beforeunload', fonction (e) {
si (!window.closed) {
sessionStorage.removeItem(is_reloaded);
}
});
Dans cet exemple, nous définissons l'élément is_reloaded dans sessionStorage lors du chargement de la page. Lorsque la page est actualisée, l'élément existe toujours, nous pouvons donc savoir si la page a été actualisée en vérifiant is_reloaded. Cette méthode ne peut pas non plus distinguer avec précision l'actualisation et la fermeture, mais combinée à l'analyse des modèles de comportement des utilisateurs, elle peut fournir un certain degré de distinction.
L'API Page Visibility offre la possibilité de détecter si une page est visible pour l'utilisateur et peut également être utilisée pour déterminer indirectement le comportement de l'utilisateur.
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'caché') {
// L'utilisateur a quitté la page en cours, éventuellement en fermant ou en sautant
}
if (document.visibilityState === 'visible') {
// La page devient visible, soit en ouvrant, en actualisant ou en revenant d'un autre onglet
}
});
Grâce à cette API, vous pouvez effectuer certains traitements lorsque l'utilisateur quitte la page, puis porter un jugement lorsque l'utilisateur revient sur la page. Cependant, cela ne surveille pas uniquement les événements d’actualisation avec précision.
Vous pouvez définir un cookie en JavaScript et lui attribuer un court délai d'expiration, vérifier si le cookie existe lorsque l'utilisateur actualise et le juger en fonction de l'horodatage :
//Définir les cookies
function setCookie (nom, valeur, secondes) {
var expire = new Date(Date.now() + secondes * 1000);
document.cookie = nom + = + valeur + ;expires= + expires.toUTCString();
}
// Récupère les cookies
fonction getCookie(nom) {
var keyValue = document.cookie.match('(^|;) ?' + nom + '=([^;]*)(;|$)');
return keyValue ? keyValue[2] : null;
}
// Actualisation du moniteur
window.addEventListener('load', function() {
var lastTime = getCookie('last_refresh_time');
var currentTime = Date.now();
if (lastTime && currentTime - parseInt(lastTime) < 1000) {
// Si la différence entre les deux horodatages est inférieure à 1 seconde, cela est considéré comme un événement d'actualisation
console.log (la page a été actualisée) ;
}
setCookie('last_refresh_time', currentTime, 1);
});
En configurant et en vérifiant la présence du cookie et la différence avec l'heure actuelle, nous pouvons être en mesure de déduire si une page a été actualisée ou vient d'être ouverte. Cependant, étant donné que les cookies peuvent s’étendre sur des fenêtres et des onglets, cette solution n’est toujours pas parfaite.
1. Comment surveiller les événements d'actualisation de page via JavaScript ?
Vous pouvez surveiller les événements d'actualisation de page via JavaScript pour effectuer les opérations associées. Une solution consiste à utiliser l’événement beforeunload.
window.addEventListener('beforeunload', function(event) { // Code exécuté avant l'actualisation de la page // Par exemple, envoi de requêtes, sauvegarde de données, etc. });2. Comment surveiller uniquement les événements d'actualisation de page, mais pas les événements de fermeture de page en JavaScript ?
Si vous souhaitez uniquement surveiller l'événement d'actualisation de la page mais pas l'événement de fermeture de la page, vous pouvez utiliser les événements beforeunload et unload en combinaison.
window.addEventListener('beforeunload', function(event) { // Code exécuté avant l'actualisation de la page // Par exemple, envoi de requêtes, sauvegarde de données, etc. }); window.addEventListener('unload', function(event)); { // Code exécuté à la fermeture de la page // Par exemple, nettoyer les ressources, gagner du temps de sortie, etc. });De cette façon, lorsque l'utilisateur actualise la page, l'événement beforeunload sera déclenché, et lorsque l'utilisateur fermera la page, les événements beforeunload et unload seront déclenchés.
3. Comment surveiller uniquement les événements d'actualisation des pages Web en JavaScript tout en excluant la surveillance des autres méthodes de navigation ?
Si vous souhaitez uniquement surveiller l'événement d'actualisation de la page Web, mais pas d'autres méthodes de navigation (telles que cliquer sur un lien ou cliquer sur le bouton avant/arrière), vous pouvez utiliser l'événement beforeunload conjointement avec l'interface PerformanceNavigation.
window.addEventListener('beforeunload', function(event) { // Détermine s'il s'agit d'un événement d'actualisation de page Web if (performance.navigation.type === performance.navigation.TYPE_RELOAD) { // Code exécuté avant l'actualisation de la page // Par exemple Envoyer des requêtes, sauvegarder des données et autres opérations}});Utilisez performance.navigation.type pour déterminer le type de navigation. S'il s'agit de TYPE_RELOAD, cela signifie que la page est déclenchée par une opération d'actualisation. De cette manière, le code correspondant sera exécuté uniquement lors de l'événement d'actualisation de la page Web.
J'espère que le contenu ci-dessus pourra vous aider à mieux comprendre la méthode de surveillance des événements d'actualisation de page JavaScript. L'éditeur de Downcodes rappelle que dans les applications réelles, vous devez choisir la méthode appropriée en fonction des besoins spécifiques et gérer la compatibilité.