How to handle changing of url using native javascript?

Question

I have code.

window.addEventListener('popstate', function (e) {
  // The URL changed...
  console.log(e);
});
setInterval(() => {
  history.pushState(null, "Other page", \`/${Math.ceil(Math.random() * 200)}\`)
}, 1000);

So, it changes the url of page every second to not same. But I do not get the event object in console. Why?

Quentin · Accepted Answer · 2020-06-10 08:19:16Z

1

See mdn:

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history.back() or history.forward() in JavaScript).

answered Jun 10, 2020 at 8:19

community wiki

Quentin

Sign up to request clarification or add additional context in comments.

2 Comments

Артём Лукичёв Over a year ago

Ok, but how to handle change of url by history.pushState or history.replaceState?

Quentin Over a year ago

You're calling those functions explicitly so you know when you are changing the history. Just make whatever DOM changes you like at the same time you manipulate the history. The popstate event is there so you can change things back when the user hits the back button.

Collectives™ on Stack Overflow

How to handle changing of url using native javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related