How to “browser back” when using pushState?

Question

I have this code:

window.history.pushState(newUrl, "", newUrl);

My question is, how to make sure that when doing pushState the browser back button will function as normal or in other words should go "back"?

(without using jQUery)

Answer 1

The normal behaviour for the back button is for the browser to go back to the previous document, but when you use pushState, there isn't a previous document.

The point of pushState is to keep the browser on the same document while updating the URL. This is accompanied by DOM changes applied with JavaScript.

It is a simulation of going to a new page.

To make the back button appear to work, you need to write a matching simulation of going to the previous page.

You can do this by listening for a popstate event.

Page <span id="p">1</span>

<button>Next</button>

<script>
document.querySelector("button").addEventListener("click", function () {
  document.getElementById('p').textContent++;
  history.pushState({}, "", "/" + document.getElementById('p').textContent);
});

addEventListener("popstate", function (e) {
  document.getElementById('p').textContent--;
  e.preventDefault();
});
</script>

Answer 2

push is for pushing... adding

---

you should go for history.back()

If you want to popState - emit popstate event on window or do history.replaceState()

---

If you want to cancell commented event: My answer will do the trick https://stackoverflow.com/a/44553087/5694206