Change URL without refresh the page

Question

I would like to replace an url without page refresh   I need to change   https   example com en step1   to  https   example com en step2   How to do that

User · Answer

When you use a function       lt p onclick  update url   en step2     gt Link lt  p gt    lt script gt  function update url url        history pushState null  null  url      lt  script gt

User · Answer

Update  Based on Manipulating the browser history  passing the empty string as second parameter of pushState method  aka title  should be safe against future changes to the method  so it s better to use pushState like this   history pushState null        en step2          You can read more about that in mentioned article  Original Answer  Use history pushState like this   history pushState null  null    en step2       More info  MDN article   Manipulating the browser history Can I use Maybe you should take a look   Does Internet Explorer support pushState and replaceState      Update 2 to answer Idan Dagan s comment      Why not using history replaceState      From MDN     history replaceState   operates exactly like history pushState   except that replaceState   modifies the current history entry instead of creating a new one   That means if you use replaceState  yes the url will be changed but user can not use Browser s Back button to back to prev  state s  anymore  because replaceState doesn t add new entry to history  and it s not recommended and provide bad UX   Update 3 to add window onpopstate  So  as this answer got your attention  here is additional info about manipulating the browser history  after using pushState  you can detect the back forward button navigation by using window onpopstate like this   window onpopstate   function e                     As the first argument of pushState is an object  if you passed an object instead of null  you can access that object in onpopstate which is very handy  here is how   window onpopstate   function e        if e state            console log e state              Update 4 to add Reading the current state   When your page loads  it might have a non-null state object  you can read the state of the current history entry without waiting for a popstate event using the history state property like this   console log history state     Bonus  Use following to check history pushState support   if  history pushState          o

[javascript] Change URL without refresh the page

The answer is

Examples related to javascript

Examples related to html5-history

Tags