Detect if page is load from back button

Question

Is there any way to detect if current page came from back button?

I want to load data from cookie only if current page came from back button.

Answer 1

Note: This is reported to no longer work in the latest versions of Chrome.

When a user goes back a page, any visible form data is preserved, while any JavaScript variables are reset. I say 'visible' form data, as hidden fields seem not to be preserved, but invisible inputs are.

You can use this to your advantage in order to detect whether the page was an initial load, or had already been loaded previously such as from a back button click.

Create a invisible input field (not type 'hidden') with a value of '0', and within a DOM ready loader check to see if the value has been set to '1'; if it has you know the page has already been loaded, such as from a back button; if it is still '0' then the page has initially loaded for the first time, set the value to '1'.

Note: This is a bit delicate in the way it works, and probably doesn't work in all browsers; I built it with Chrome in mind.

• The DOM needs to be loaded; not all ready functions work. The one below does, so does the JQuery ready; however (function() { }) in my instance does not.
• The Input cannot be of type="hidden". Set style="display:none;" on the input instead.

.

<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

For a simpler check, there're Navigation Timing API Spec (already deprecated, but widely supported) and Navigation Timing Level 2 API Spec (working draft, supported by major browser)

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 3

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

Answer 4

Use pageshow event to detect back or forward buttons:

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

For more details you can check pageshow event in here .

Answer 5

In addition to @Radderz answer, I had to add setTimeout to make their solution work in chrome 83. Otherwise, I would only see 'First time load' alert.

In the HTML:

<input id="backbuttonstate" type="text" value="0" style="display:none;" />

In the script:

document.addEventListener('DOMContentLoaded', function () {

    var ibackbutton = document.getElementById("backbuttonstate");

    setTimeout(function () {

        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');
        }

    }, 200);

}, false);

Answer 6

I think this could be done with sessionStorage if you are working with pages within your project(This does not take external pages into account). Off the top of my head, when you are on your "Main Page" then you click a link and go to the next page.

On that next page, you can set a value in sessionStorage like:

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

Then back to your Main page, you can have a condition like:

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 7

Basically, you can't because of browser restrictions. HTML5 history API, the onpopstate event will be triggered when navigating to back page. But this will fire even if u use application navigation.

alternative solution refer - How to Detect Browser Back Button event - Cross Browser