CODEWITHSUNDEEP
javascripthtmldomcross-browserhtml5-history
Pacerier
Pacerier

Reputation: 89743

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

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?

Upvotes: 17

Views: 6848

Answers (4)

Random
Random

Reputation: 1

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"

Upvotes: -1

Freek Bes
Freek Bes

Reputation: 1

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.

Upvotes: 0

Catalin MUNTEANU
Catalin MUNTEANU

Reputation: 5634

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"

Upvotes: 4

Sebastien Lorber
Sebastien Lorber

Reputation: 92210

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.

Upvotes: 4

Related Questions