javascript - Detect if the user arrived to the current page via the browser back button - Stack Overflow

admin管理员组

文章数量:1314215

I have a site where if a user navigates to a certain page then he gets a dialog notification depending on some condition on the page. The user can navigate to other pages from this page and of course can press the back button on those pages to navigate back to this page.

I'd like to detect if the user arrives via the back button to this page, so the dialog notification is not shown again (because the user has already seen it).

Is there a way to detect this reliably?

I have a site where if a user navigates to a certain page then he gets a dialog notification depending on some condition on the page. The user can navigate to other pages from this page and of course can press the back button on those pages to navigate back to this page.

I'd like to detect if the user arrives via the back button to this page, so the dialog notification is not shown again (because the user has already seen it).

Is there a way to detect this reliably?

• javascript
• navigation
• cross-browser
• back-button

Share Improve this question Follow asked Feb 27, 2015 at 19:44 TomTom 7,58688 gold badges4242 silver badges5858 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

MDN list of window events

Your best possibility may be window.onpageshow = function(){};

An event handler property for pageshow events on the window.

window.onpageshow = function(event) {
    if (event.persisted) {
        alert("From back / forward cache.");
    }
};

Input trick is not longer working. Here's the solution I use:

if (window.performance && window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD) {
    alert('Got here using the browser "Back" or "Forward" button.');
}

The best (although not TREMENDOUSLY reliable) way is to use the Javascript history object. You can look at the history.previous page to see if it's the next in the series. Not a great solution, but maybe the only way to figure it out.

I like use a value in an input field for this:-

<input type="hidden" id="fromHistory" value="" />

<script type="text/javascript">
if (document.getElementById('fromHistory').value == '') {
    document.getElementById('fromHistory').value = 'fromHistory');
    alert('Arrived here normally');
} else {
    console.log('Arrived here from history, e.g. back or forward button');
}
</script>

This works because the browser repopulates the value of the field with the one the javascript puts in there if it navigates back to it from history :-)

There's window.performance navigationTiming API to detect whether the page is loaded by pressing back button.

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

There's a deprecated api as well to detect back button:

if (window.performance) {
     if (window.performance.navigation
      && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
          console.log('this page is load from back/forward');
     } else {
          console.log('This is normal page load');
     }
} else {
     console.log("browser doesn't support this API");
}

You can bine both to support oldest browsers.

本文标签： javascriptDetect if the user arrived to the current page via the browser back buttonStack Overflow