Force refresh page when user taps browser back button

Design help Custom code
1

I need to somehow detect that the user has pressed a browsers back button and reload the page with refresh. There are some comments on Stack Overflow about it:

I’m not sure how I would implement this into my webflow project. Anyone ever had to do this?

Cheers :slight_smile:

2

Hello!

I have had to solve this issue in the past, specifically for Safari users since Safari slides back to the exit state of the previous page when going back. Below is the custom code that worked for me to accomplish this:

/* If browser back button was used, flush cache */
(function () {
	window.onpageshow = function(event) {
		if (event.persisted) {
			window.location.reload();
		}
	};
})();

This is the article where the code originally came from as well:

3

The History interface allows manipulation of the browser session history , that is the pages visited in the tab or frame that the current page is loaded in.

There are multiple ways to Refresh/Reload a page with jQuery/JavaScript, some are:

location.href = location.href
location.replace(location.pathname)
window.location = window.location
window.self.window.self.window.window.location = window.location
4

Hi, I tried 20 different codes and finally found one that works for me. In my situation, I have a filtering system on page 1. I filter results on page 1 (which checked the filter checkbox), click on an item and arrive on page 2 (item’s own page). But when I go back, filters are still active but the checkbox are not checked. Which means to deactivate the filter, you have to check it lol. Anyway I found this code and it works perfectly, reloading page 1, resetting everything. I put that code on page 1 header and DONE !

  <script type="text/javascript">  
if(performance.navigation.type == 2){
   location.reload(true);
}
  </script>

Hope it helps :wink:

5

Thanks a lot, after many tries I came across your solution and it worked!