15

The second parameter of History.pushState and History.replaceState can be used to set the "title" of the history entry.

This means that when the user clicks through page 1 to page 8, this is what he should see in his history bar:

enter image description here

And it is working on Safari and Opera.

But on Chrome and FireFox, this is what the user sees:

enter image description here

Trying to change document.title doesn't work as it changes all the entries within the history title:

enter image description here

What's the best solution to this problem?

Are we forced to using only one history title for all the pages implemented using pushState and replaceState?

Pacerier
  • 76,400
  • 86
  • 326
  • 602

3 Answers3

4

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers.

Take a look at the demos here

Example of use:

History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
History.back(); // logs {state:3}, "State 3", "?state=3"
History.back(); // logs {state:1}, "State 1", "?state=1"
History.back(); // logs {}, "Home Page", "?"
History.go(2); // logs {state:3}, "State 3", "?state=3"
Grégoire C
  • 1,291
  • 1
  • 13
  • 31
Catalin MUNTEANU
  • 5,440
  • 2
  • 32
  • 42
  • As of about a year ago, History.js is no longer maintained. Please see https://github.com/browserstate/history.js/blob/master/README.md – Goulash Jan 08 '18 at 04:11
4

I had the same problem and it seems you are wrong.

If History.js does support it, you could too. By looking at the source code it seems history JS does it this way:

https://github.com/browserstate/history.js/blob/master/scripts/uncompressed/history.js#L1293

try {
    document.getElementsByTagName('title')[0].innerHTML = title.replace('<','&lt;').replace('>','&gt;').replace(' & ',' &amp; ');
}
catch ( Exception ) { }
document.title = title;

I tested and it works fine for me with Chrome: it does not "rewrite" the whole history titles. However it seems going back or forward can cause a page reload that can eventually reinitialize that title.

Sebastien Lorber
  • 79,294
  • 59
  • 260
  • 386
  • 1
    Please note that this code needs to come _after_ `history.pushState` to display the correct history information. – Goulash Jan 08 '18 at 04:51
0

A workaround to fix this issue is to use the following code instead:

window.history.pushState({state: 1}, null, "https://example.com");
document.title = "Your title";

So, just replace the "title" entry in the history object with null, and change the title of the document right afterwards.

At the moment, this works with Chrome, Opera and Firefox for me. Didn't test any other browsers, but I'm almost certain it will fix the issue on almost all browsers.

Freek Bes
  • 1
  • 2