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?

Save

Answer 1

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"

Snow

As of about a year ago, History.js is no longer maintained. Please see github.com/browserstate/history.js/blob/master/README.md – Consequent

Answer 2

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.

Hyperacidity

Please note that this code needs to come after history.pushState to display the correct history information. – Consequent

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.

Aronoff

Answer 4

Maybe you can use

window.location.href = "your string"; or window.location.href += "your string";

To change the title, you can simply just use

document.getElementsByTagName("title").innerHTML = "your string";

Only problem is that it could perhaps say "redirect blocked", and/or maybe say "toggling to prevent the browser from hanging"

Fencer