CODEWITHSUNDEEP
javascripthistorypopstate
Erica Stockwell-Alpert
Erica Stockwell-Alpert

Reputation: 4863

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

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.

Upvotes: 20

Views: 73046

Answers (3)

Mahmoud Abd Al-Aziz
Mahmoud Abd Al-Aziz

Reputation: 109

In case anyone facing this issue in React-JS,

let's say you have a useEffect() and want to log the popState on every re-render or (Go-Forward/Go-Back)

 useEffect(() => {
    function handlePopStateEvent(e) {
        console.log(e);
        console.log("Check if the function Working")

    }

    console.log("Check if Effect Working")

    window.addEventListener("popstate", handlePopStateEvent);

    return () => window.removeEventListener("popstate", handlePopStateEvent);

}, []);

You will need to add some history manually using the history.pushState(), even if you did it by hand let's say you typed in the URL some routes/paths like

http://localhost:5173/lab

http://localhost:5173/home

http://localhost:5173/blog

http://localhost:5173/about

it will not work, the popState() event will not log anything, and if you try to invoke the function manually to see the log you will get undefined.

The solution: in the Console add some history like this:

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

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

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

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

Add history to the browser manullay using history.pushState() in the console

Then when you use the Back/Forward arrows in the browser or Alt + (← →) the popState() will log in to the console like this

Logging the popState event in the console on Fowrard/Back

On every Back/Forward.

For more understanding of this behavior, you can check the MDN on the History API, popState, and history.push()

Here's the Mdn description:

The popstate event of the Window interface is fired when the active history entry changes while the user navigates the session history. It changes the current history entry to that of the last page the user visited or, if history.pushState() has been used to add a history entry to the history stack, that history entry is used instead.

Link: https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event

Upvotes: 0

Akash
Akash

Reputation: 117

window.onpopstate = function(event) {
  alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
}

history.pushState({page: 1}, "title 1", "?page=1")
history.pushState({page: 2}, "title 2", "?page=2")
history.replaceState({page: 3}, "title 3", "?page=3")
history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back() // alerts "location: http://example.com/example.html, state: null"
history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"

Upvotes: 3

Paolo
Paolo

Reputation: 15847

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.

Upvotes: 36

Related Questions