javascript - Title of history.pushState is unsupported, what's a good alternative? - Stack Overflow

admin管理员组

文章数量:1225000

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?

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?

• javascript
• html
• dom
• cross-browser
• html5-history

Share Improve this question Follow asked Oct 12, 2014 at 12:13 PacerierPacerier 89.7k111111 gold badges383383 silver badges644644 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 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.

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"

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.

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"

本文标签： javascriptTitle of historypushState is unsupportedwhat39s a good alternativeStack Overflow