Detect if page is loading from the back button

Question

Is there a way to determine if the current page has appeared from the back button?

I want to load data from a cookie only if the current page appeared from the "Back" button.

Answer 1

When the user returns the page, any visible form data is saved, and any JavaScript variables are reset. I say “visible” form data, since hidden fields do not seem to be saved, but invisible inputs.

You can take advantage of this to determine if the page was a bootstrap or has already been loaded previously, for example, by clicking the back button.

Create an invisible input field (and not a type of "hidden") with the value "0" and inside the DOM ready to check to see if the value is set to "1"; if he knows that the page is already loaded, for example, using the "Back" button; if it is still "0", the page first loads, the value is set to "1".

Note. This is a little delicate in how it works, and probably does not work in all browsers; I built it with Chrome in mind.

• DOM must be loaded; Not all ready-made functions work. The one below is also jQuery ready; however (function () {}) is not in my instance.
• Input cannot be of type = "hidden". Set style = "display: none;" at the entrance.

.

<input id="backbuttonstate" type="text" value="0" style="display:none;" /> <script> document.addEventListener('DOMContentLoaded', function () { var ibackbutton = document.getElementById("backbuttonstate"); if (ibackbutton.value == "0") { // Page has been loaded for the first time - Set marker ibackbutton.value = "1"; alert('First time load'); } else { // Back button has been fired.. Do Something different.. alert('Previously loaded - Returned from Back button'); } }, false); </script> 

Answer 2

  if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) { $('.formName').get(0).reset(); } 

Answer 3

For easier verification, the Navigation Timing API (already outdated but widely supported) and the Navigation Timing Level 2 API (a working draft supported by the main browser) are provided.

 if (window.performance) { var navEntries = window.performance.getEntriesByType('navigation'); if (navEntries.length > 0 && navEntries[0].type === 'back_forward') { console.log('As per API lv2, this page is load from back/forward'); } else if (window.performance.navigation && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) { console.log('As per API lv1, this page is load from back/forward'); } else { console.log('This is normal page load'); } } else { console.log("Unfortunately, your browser doesn't support this API"); } 

Answer 4

I think this can be done using sessionStorage if you are working with pages in your project (this does not take into account external pages). Outside of my head, when you are on the "main page", then you click on the link and go to the next page.

On this next page, you can set the value in sessionStorage, for example:

 sessionStorage.setItem('doSomething', 'yes'); 

Then return to the main page, and you may experience this condition:

 const sCheckSession = sessionStorage.getItem('doSomething'); if(sCheckSession == 'yes') { // do something crazy, then reset your reference to no // so it wont interfere with anything else sessionStorage.setItem('doSomething', 'no'); } 

Answer 5

Essentially, you cannot due to browser restrictions. HTML5 history API, the onpopstate event will be fired when going to the return page. But it will work even if you use application navigation.

see alternative solution - How to detect the back button event in a browser - Cross browser

Answer 6

Use the pagehow event to detect the back or forward buttons:

 $(window).bind("pageshow", function(event) { if (event.originalEvent.persisted) { Alert("User clicked on back button!"); } }); 

You can learn more about this on the pageshow page in the section here .

Answer 7

This worked for me, I added this code at the bottom of the page.

 window.addEventListener("pageshow", function(event) { var historyTraversal = event.persisted || (typeof window.performance != "undefined" && window.performance.navigation.type === 2); if (historyTraversal) { // Handle page restore. window.location.reload(); } }); 

I accomplished this task with the trick described above. I added an event listener that is called when someone returns to the page using the "Back" button in the browser and just reloads the page on this event. Hope this helps.