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
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.
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
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>
I found some information here Javascript Detecting Page Refresh
function UnLoadWindow() {
return 'We strongly recommends NOT closing this window yet.'
}
window.onbeforeunload = UnLoadWindow;
This implementation helped me:
From MDN reference 2022: Navigation Timing Level 2 specification
const navigationType =
(window.performance.getEntriesByType('navigation')
[0] as PerformanceNavigationTiming).type;
const isPageReload = navigationType === 'reload';
const isNavigation = navigationType === 'navigate';
const isBackForwarad = navigationType === 'back_forward';
const isPrerender = navigationType === 'prerender';
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;
});
One easy solution has not been mentioned (not relying on the deprecated window.performance.navigation
):
window.onbeforeunload
to store the time and the URL of your current page (in localstorage) when the user leaves the page (potentially refreshes the page).window.onbeforeunload = function(e)
{
localStorage.setItem('reload-url', window.location.href);
}
window.onload
to get those values from localstorage.window.onload = function(e)
{
if (localStorage.getItem('reload-url') != null))
{
if (window.location.href == localStorage.getItem('reload-url'))
{
console.log('Reload');
}
}
}
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.
<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();
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.