history replaceState example

Question

Can any one give a working example for history replaceState  This is what w3 org says      history    replaceState data  title    url           Updates the current entry in the session history to have the given data  title  and  if provided and not null  URL    Update   This works perfectly   history replaceState        foo     foo       Url is changing  but title is not changing  Is that a bug or am I missing something  Tested on latest Chrome

User · Answer

I really wanted to respond to  Sev s answer   Sev is right  there is a bug inside the window history replaceState     To fix this simply rewrite the constructor to set the title manually    var replaceState tmp   window history replaceState constructor  window history replaceState constructor   function obj  title  url       var title    document getElementsByTagName  title   0       if title     undefined           title  innerHTML   title       else          var title     document createElement  title            title   innerHTML   title          var head    document getElementsByTagName  head   0           if head     undefined               head  appendChild title              else              var head     document createElement  head                document documentElement appendChild head                 head   appendChild title                         replaceState tmp obj title  url

User · Answer

Here is a minimal  contrived example   console log  window location href        whatever your current location href is window history replaceState        foo     foo     console log  window location href        oh  hey  it replaced the path with  foo   There is more to replaceState   but I don t know what exactly it is that you want to do with it

User · Answer

According to MDN History doc There is clearly said that second argument is for future used not for now  You are right that second argument is deal with web-page title but currently it s ignored by all major browser     Firefox currently ignores this parameter  although it may use it in the future  Passing the empty string here should be safe against future changes to the method  Alternatively  you could pass a short title for the state to which you re moving

User · Answer

look at the example   window history replaceState       foo   bar      Nice URL Title     nice url     window onpopstate   function  e        if  typeof e state     object   amp  amp  e state foo     bar             alert  Blah blah blah              window history go -1     and search location hash

User · Answer

history pushState pushes the current page state onto the history stack  and changes the URL in the address bar   So  when you go back  that state  the object you passed  are returned to you   Currently  that is all it does   Any other page action  such as displaying the new page or changing the page title  must be done by you   The W3C spec you link is just a draft  and browser may implement it differently   Firefox  for example  ignores the title parameter completely   Here is a simple example of pushState that I use on my website    function            Use AJAX to load the page  and change the title     function loadPage sel  p             sel  load p      content   function                document title       pageData   data  title                              When a link is clicked  use AJAX to load that page        but use pushState to change the URL bar       document  on  click    a   function e           e preventDefault            history pushState  page  this href       this href           loadPage   frontPage   this href                   This event is triggered when you visit a page in the history        like when yu push the  back  button       window  on  popstate   function e           loadPage   frontPage   location pathname           console log e originalEvent state             jQuery

User · Answer

The second argument Title does not mean Title of the page - It is more of a definition information for the state of that page  But we can still change the title using onpopstate event  and passing the title name not from the second argument  but as an attribute from the first parameter passed as object  Reference   http   spoiledmilk com blog html5-changing-the-browser-url-without-refreshing-page

User · Answer

Suppose https   www mozilla org foo html executes the following JavaScript   const stateObj     foo   bar      history pushState stateObj       bar html      This will cause the URL bar to display https   www mozilla org bar2 html  but won t cause the browser to load bar2 html or even check that bar2 html exists

User · Answer

Indeed this is a bug  although intentional for 2 years now  The problem lies with some unclear specs and the complexity when document title and back forward are involved   See bug reference on Webkit and Mozilla  Also Opera on the introduction of History API said it wasn t using the title parameter and probably still doesn t      Currently the 2nd argument of pushState and replaceState     the title   of the history entry     isn t used in Opera s implementation  but may   be one day    Potential solution  The only way I see is to alter the title element and use pushState instead   document getElementsByTagName  title   0  innerHTML    bar   window history pushState        bar     bar

[javascript] history.replaceState() example?

Examples related to javascript

Examples related to ajax

Examples related to html