Vérifier si la page est rechargée ou rafraîchie en Javascript
je veux vérifier quand quelqu'un essaie d'actualiser une page.
par exemple, quand j'ouvre une page, rien ne se passe mais quand je rafraîchis la page renvoie une alerte.
7 réponses
une meilleure façon de savoir que la page est effectivement Rechargée est d'utiliser l'objet navigator qui est pris en charge par la plupart des navigateurs modernes.
il utilise le API de synchronisation de Navigation .
//check for Navigation Timing API support
if (window.performance) {
console.info("window.performance works fine on this browser");
}
if (performance.navigation.type == 1) {
console.info( "This page is reloaded" );
} else {
console.info( "This page is not reloaded");
}
source: https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API
la première étape consiste à vérifier sessionStorage
pour une valeur prédéfinie et si elle existe, alerter l'utilisateur:
if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');
la deuxième étape consiste à fixer sessionStorage
à une certaine valeur (par exemple true
):
sessionStorage.setItem("is_reloaded", true);
les valeurs de Session sont conservées jusqu'à ce que la page soit fermée de sorte qu'elle ne fonctionnera que si la page est rechargée dans un nouvel onglet avec le site. Vous pouvez également garder le compte de rechargement de la même façon.
conservez un cookie la première fois que quelqu'un visite la page. Lors du rafraîchissement, vérifiez si votre cookie existe et si c'est le cas, signalez-le.
function checkFirstVisit() {
if(document.cookie.indexOf('mycookie')==-1) {
// cookie doesn't exist, create it now
document.cookie = 'mycookie=1';
}
else {
// not first visit, so alert
alert('You refreshed!');
}
}
et dans votre étiquette corporelle:
<body onload="checkFirstVisit()">
j'ai trouvé quelques informations ici Javascript Détection Actualisation de la Page . Sa première recommandation est d'utiliser des champs cachés, qui ont tendance à être stockés à travers des mises à jour de page.
function checkRefresh() {
if (document.refreshForm.visited.value == "") {
// This is a fresh page load
document.refreshForm.visited.value = "1";
// You may want to add code here special for
// fresh page loads
} else {
// This is a page refresh
// Insert code here representing what to do on
// a refresh
}
}
<html>
<body onLoad="JavaScript:checkRefresh();">
<form name="refreshForm">
<input type="hidden" name="visited" value="" />
</form>
</body>
</html>
si
event.currentTarget.performance.navigation.type
retourne
0 => l'utilisateur vient de taper une Url
1 = > page reloaded
2 = > bouton arrière cliqué.
j'ai trouvé quelques informations ici JavaScript Detecting page Refresh
function UnLoadWindow() {
return 'We strongly recommends NOT closing this window yet.'
}
window.onbeforeunload = UnLoadWindow;
si vous voulez également détecter si l'utilisateur clique sur le X en haut à droite du navigateur:
function handleWindowClose()
{
if((window.event.clientX<0) || (window.event.clientY<0))
{
event.returnValue = "If you have made any changes to the fields without clicking the Save button, your changes will be lost.";
}
}