history.pushState的标题不受支持，有什么好的替代方案？

Question

History.pushState和History.replaceState的第二个参数可用于设置历史记录的“标题”。这意味着当用户从页面1点击到页面8时，他在历史记录栏中看到的就是这样：

这在Safari和Opera上运行正常。 但是在Chrome和FireFox上，用户看到的是这样的：

尝试更改document.title无效，因为它会更改历史记录中所有条目的标题：

有什么最佳解决方案吗？ 我们是否被迫只为使用pushState和replaceState实现的所有页面使用一个历史标题？

- Pacerier

Answer 1

我曾经遇到同样的问题，看起来你是错的。

如果History.js支持它，你也可以这么做。从源代码来看，History JS是这样做的：

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;

我测试过，使用Chrome浏览器时没有问题：它不会“重写”整个历史记录标题。然而它似乎会在返回或前进时导致页面重新加载，这可能会重新初始化该标题。

- Sebastien Lorber

---

请注意，此代码需要在 history.pushState 之后才能显示正确的历史信息。 - Goulash

Answer 2

History.js 优美地支持所有浏览器中的 HTML5 历史记录/状态 API（pushState、replaceState、onPopState）。

请在这里查看演示。

使用示例：

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"

- Catalin MUNTEANU

---

大约一年前，History.js停止维护。请参阅https://github.com/browserstate/history.js/blob/master/README.md。 - Goulash

Answer 3

一个解决此问题的方法是使用以下代码：

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

所以，只需将历史对象中的“title”条目替换为null，并立即更改文档的标题。

目前，这在Chrome、Opera和Firefox上对我有效。没有测试其他浏览器，但我几乎可以肯定它会在几乎所有浏览器上修复此问题。

- Freek Bes

Answer 4

也许你可以使用

window.location.href = "你的字符串"; 或者 window.location.href += "你的字符串";

要更改标题，你只需要使用

document.getElementsByTagName("title").innerHTML = "你的字符串";

唯一的问题是它可能会显示“重定向被阻止”，和/或者可能会说“切换以防止浏览器挂起”。

- Random