window.onpopstate is not working; nothing happens when I navigate back to page

javascript history popstate
Erica Stockwell-Alpert picture Erica Stockwell-Alpert · Apr 7, 2015 · Viewed 33.7k times · Source

I'm trying to add window.onpopstate on one of the pages on my site, but nothing is happening. I put this script on the page:

<script type="text/javascript">
  window.addEventListener('popstate', function(event) {
    if (event.state) {
      alert(event.state);
    }
  }, false);
</script>

I have also tried:

<script type="text/javascript">
  window.onpopstate = function() {
    alert("popped!");
  }
</script>

However, I don't get any alerts when I navigate back to the page.

Answer

Paolo picture Paolo · Apr 7, 2015

You get a popstate event only if you add one or more history entry/entries and later the user clicks the back button in the browser.

Adding entries to the browser history lets you change the URL (just as the user navigates to another page) but without actually loading a new page.

You add a history entry with pushState method:

history.pushState({}, '', '/newpage');

As you add one entry and the user clicks back the URL switches back to the previous one but the page at that address is not loaded. A popstate event is triggered instead.

See https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Exceptions:

Older browsers don't support popstate events and manipulation of the browser's history.

Some browsers (ex. Safari) trigger a popstate event also when the page is actually loaded.

Related questions

Can I prevent history.popstate from triggering on initial page-load?

I'm working on a site that serves content via AJAX. If you click an item in the menu, a content div gets updated with $.get response, nothing fancy. I'm implementing history.pushState to allow navigation with the browser's back/forward …

Read More
SecurityError: The operation is insecure - window.history.pushState()

I'm getting this error in Firefox's Console: SecurityError: The operation is insecure and the guilty is HTML5 feature: window.history.pushState() when I try to load something with AJAX. It is supposed to load some data but Javascript stops executing …

Read More
Original purpose of <input type="hidden">?

I am curious about the original purpose of the <input type="hidden"> tag. Nowadays it is often used together with JavaScript to store variables in it which are sent to the server and things like that. HTML 2.0 was …

Read More