I want to check when someone tries to refresh a page.
For example, when I open a page nothing happens but when I refresh the page it should display an alert.
I want to check when someone tries to refresh a page.
For example, when I open a page nothing happens but when I refresh the page it should display an alert.
⚠️⚠️⚠️ 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
performance.navigation.type == performance.navigation.TYPE_RELOAD
is easier to read instead of == 1
. Also, if you check performance.navigation
you will find that there are 4 diffrent navigation types like TYPE_BACK_FORWARD
,TYPE_NAVIGATE
Feb 16, 2018 at 11:17
window.performance.navigation.type
is deprecated, pls see my answer.
Nov 14, 2018 at 19:39
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.
true
is converted to "true"
. 2). Session storage persists until the user closes the browser window, so you can't tell the difference between page reload and navigating away from and back to you site within the same browser session.
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
event.currentTarget.performance.navigation.type
returns
0 => user just typed in an Url
1 => page reloaded
2 => back button clicked.
I found some information here Javascript Detecting Page Refresh . His first recommendation is using hidden fields, which tend to be stored through page refreshes.
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>
Referer
property and modify server response on the basis of this property
<script>
element to the bottom would work - but it's still not a guaranteed solution (and neither is the cookie method).
Referer
isn't reliable either; many proxies and browser extensions strip it from requests.
I found some information here Javascript Detecting Page Refresh
function UnLoadWindow() {
return 'We strongly recommends NOT closing this window yet.'
}
window.onbeforeunload = UnLoadWindow;
Here is a method that is supported by nearly all browsers:
if (sessionStorage.getItem('reloaded') != null) {
console.log('page was reloaded');
} else {
console.log('page was not reloaded');
}
sessionStorage.setItem('reloaded', 'yes'); // could be anything
It uses SessionStorage to check if the page is opened the first time or if it is refreshed.
if(sessionStorage.reload) {
sessionStorage.reload = true;
// optionnal
setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
sessionStorage.setItem('reload', false);
}
Append the below Script in Console:
window.addEventListener("beforeunload", function(event) {
console.log("The page is redirecting")
debugger;
});
<script>
var currpage = window.location.href;
var lasturl = sessionStorage.getItem("last_url");
if(lasturl == null || lasturl.length === 0 || currpage !== lasturl ){
sessionStorage.setItem("last_url", currpage);
alert("New page loaded");
}else{
alert("Refreshed Page");
}
</script>
document.addEventListener("keydown", (e)=>{
if (e.keyCode === 116) {
e.preventDefault();
// your code here
// var r = confirm("Reload!");
// if (r == true)
// window.location.reload();
}
})
window.performance.navigation.type
is deprecated, pls see my answer.