如何设置浏览器为history.pushState显示的条目的标题

How to set the title of the entry that the browser displays for history.pushState?

本文关键字：显示 pushState 标题 history 何设置 设置 浏览器      更新时间：2023-09-26

我使用history.pushState( stateObject, title, url )将新条目推送到浏览器的历史堆栈中。尽管第二个参数title的名称不同，但它不会设置浏览器历史记录中显示的条目的标题。如果我理解正确的话，title是为将来使用而保留的，目前所有浏览器都会忽略它。在这里通过''应该是安全的，我的研究结果支持这一点。

因此，我想知道如何设置用户将在其历史记录中看到的标签，我认为document.title可以完成这项工作。所以我的代码看起来像这个

var myTitle = /* code to generate title here */
var myURL = /* code to generate url here */
var myState = /* code to generate realizable state object here */    
document.title = myTitle;
history.pushState( myState, '', myURL ); // 2nd parameter can also be myTitle; this has no effect on all major browsers

然而，它并没有如预期的那样发挥作用。更确切地说，我遇到了一个奇怪的失误。似乎pushState不是使用新的document.title而是使用先前的标题来创建新的历史条目。我想问题是DOM不会立即更新，而是只有在JS离开当前调用堆栈之后才更新。因此CCD_ 8在CCD_。

W3C的HTML5规范第5.5.2章第8点下面的注释说：

title纯粹是咨询性的。用户代理可能会在用户界面中使用标题。

这是所有主要浏览器实现的行为。然而，UI和新标题只有在JS函数返回后才会更新。

有什么解决方案吗？

当活动历史记录条目发生更改时，将触发popstate事件。如果正在激活的历史条目是由对history.pushState((的调用创建的，或者受到对histors.replaceState((调用的影响，则popstate事件的state属性包含历史条目的state对象的副本。

window.addEventListener('popstate', function(e) {
  var character = e.state;
      document.title = "Title | ";
});
相关文章：