33
Views
7
Comments
Solved
browser refresh button click

Hi All

help required

In my react application i want to know if the browser refresh button is clicked or not. 

Thanks

Kumar V

2023-01-03 11-55-04
Suchita Khandelwal
Solution

Hey!

You can add an event listener in JavaScript.

// Store a flag in session storage

if (sessionStorage.getItem('is_reloaded')) {

    console.log('Page was refreshed');

} else {

    console.log('Page was loaded for the first time');

}


// Set the flag when the page is about to be unloaded

window.addEventListener('beforeunload', function() {

    sessionStorage.setItem('is_reloaded', 'true');

});

Explanation:
The beforeunload event is triggered when the user is about to navigate away from the page, including refreshing the page.
SessionStorage can be used to track whether a page load is the first in the session or a refresh. 

UserImage.jpg
saravanakumar v

Hi Suchita Khandelwal

where we need to place this code. is both the code needs to be placed together or in separate actions

Thanks

Kumar V

2023-01-03 11-55-04
Suchita Khandelwal
2026-02-26 06-29-24
Rahul
 
MVP

@saravanakumar v 

What exactly you want when user click on browser refresh button then you want alert or directly you want refresh or not.

You need to some JS here.

Check if page gets reloaded or refreshed in JavaScript - Stack Overflow 

Check this script this will help you.

UserImage.jpg
saravanakumar v

hi rahul

The javascript in the site are deprecated in outsystems.  Navigation.type shows as deprecated. 

Thanks

Kumar V

2023-01-03 11-55-04
Suchita Khandelwal
Solution

Hey!

You can add an event listener in JavaScript.

// Store a flag in session storage

if (sessionStorage.getItem('is_reloaded')) {

    console.log('Page was refreshed');

} else {

    console.log('Page was loaded for the first time');

}


// Set the flag when the page is about to be unloaded

window.addEventListener('beforeunload', function() {

    sessionStorage.setItem('is_reloaded', 'true');

});

Explanation:
The beforeunload event is triggered when the user is about to navigate away from the page, including refreshing the page.
SessionStorage can be used to track whether a page load is the first in the session or a refresh. 

UserImage.jpg
saravanakumar v

Hi Suchita Khandelwal

where we need to place this code. is both the code needs to be placed together or in separate actions

Thanks

Kumar V

2023-01-03 11-55-04
Suchita Khandelwal
2026-01-28 16-57-48
Mihai Melencu
Champion

Hi @saravanakumar v ,

You can use window.onbeforeunload to detect a page refresh, whether it's triggered by F5, CTRL+R, or the browser's refresh button. However, this event also fires when the user attempts to leave the page in any way, including closing the tab/window or clicking a link. 

You can add the following JS in the OnReady event:

window.onbeforeunload = function() {    

//Your Custom Logic

}

2023-03-24 11-55-45
Pawan Purohit

Hi @saravanakumar v ,
You can use the onbeforeunload JavaScript event to detect when a page is being unloaded. This event triggers when the page is refreshed, the tab/window is closed, or a user navigates away by clicking a link.

To implement this, add the following JavaScript code inside the OnReady event:

window.onbeforeunload = function() {    

    // Your custom logic here

};


This will allow you to execute any necessary actions before loading the page.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.