Title of history.pushState is unsupported, what's a good alternative?

Question

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:

And it is working on Safari and Opera.

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

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

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?

Answer 1

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.

Answer 2

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"

Answer 3

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.