Menu
On Refresh/Reload/F5: If user will refresh the page, first window. onbeforeunload will fire with IsRefresh value = "Close" and then window. onload will fire with IsRefresh value = "Load", so now you can determine at last that your page is refreshing.
When we refresh the page (F5, or icon in browser), it will first trigger ONUNLOAD event. When we close the browser (X on right top icon),It will trigger ONUNLOAD event. Now when ONUNLOAD event is triggered, there is no way to distinguish between refresh the page or close the browser.
To detect page refresh by pressing F5 in a React component, we can use the performance. navigation. type property to check what kind of navigation is done. If the value is 1, then we refreshed the page manually with the F5 key.
⚠️⚠️⚠️ window.performance.navigation.type is deprecated, pls see Илья Зеленько's answer
A better way to know that the page is actually reloaded is to use the navigator object that is supported by most modern browsers.
It uses the Navigation Timing API.
//check for Navigation Timing API support
if (window.performance) {
console.info("window.performance works fine on this browser");
}
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
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
window.performance.navigation property is deprecated in the Navigation Timing Level 2 specification. Please use the PerformanceNavigationTiming interface instead.
This is an experimental technology.
Check the Browser compatibility table carefully before using this in production.
const pageAccessedByReload = (
(window.performance.navigation && window.performance.navigation.type === 1) ||
window.performance
.getEntriesByType('navigation')
.map((nav) => nav.type)
.includes('reload')
);
alert(pageAccessedByReload);
The type read-only property returns a string representing the type of navigation. The value must be one of the following:
navigate — Navigation started by clicking a link, entering the URL in the browser's address bar, form submission, or initializing through a script operation other than reload and back_forward as listed below.
reload — Navigation is through the browser's reload operation or location.reload().
back_forward — Navigation is through the browser's history traversal operation.
prerender — Navigation is initiated by a prerender hint.
This property is Read only.
function print_nav_timing_data() {
// Use getEntriesByType() to just get the "navigation" events
var perfEntries = performance.getEntriesByType("navigation");
for (var i=0; i < perfEntries.length; i++) {
console.log("= Navigation entry[" + i + "]");
var p = perfEntries[i];
// dom Properties
console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
console.log("DOM complete = " + p.domComplete);
console.log("DOM interactive = " + p.interactive);
// document load and unload time
console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));
// other properties
console.log("type = " + p.type);
console.log("redirectCount = " + p.redirectCount);
}
}
First step is to check sessionStorage for some pre-defined value and if it exists alert user:
if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');
Second step is to set sessionStorage to some value (for example true):
sessionStorage.setItem("is_reloaded", true);
Session values kept until page is closed so it will work only if page reloaded in a new tab with the site. You can also keep reload count the same way.
Store a cookie the first time someone visits the page. On refresh check if your cookie exists and if it does, alert.
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!');
}
}
and in your body tag:
<body onload="checkFirstVisit()">
I have wrote this function to check both methods using old window.performance.navigation and new performance.getEntriesByType("navigation") in same time:
function navigationType(){
var result;
var p;
if (window.performance.navigation) {
result=window.performance.navigation;
if (result==255){result=4} // 4 is my invention!
}
if (window.performance.getEntriesByType("navigation")){
p=window.performance.getEntriesByType("navigation")[0].type;
if (p=='navigate'){result=0}
if (p=='reload'){result=1}
if (p=='back_forward'){result=2}
if (p=='prerender'){result=3} //3 is my invention!
}
return result;
}
Result description:
0: clicking a link, Entering the URL in the browser's address bar, form submission, Clicking bookmark, initializing through a script operation.
1: Clicking the Reload button or using Location.reload()
2: Working with browswer history (Bakc and Forward).
3: prerendering activity like <link rel="prerender" href="//example.com/next-page.html">
4: any other method.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With