页面标题不会被history.pushState改变

Question

我刚刚在 Google Chrome 中打开了一个空白 HTML 页面，其中包含一些少量的基本标签（如 html、body、head 等），并尝试在控制台中执行以下命令：

history.pushState(null, 'my test title', '/test/url');

历史事件工作正常，但页面标题保持不变。可以吗？是不是每次都要手动改呢？如果应该的话，为什么pushState()方法中有像title这样的参数？

Answer 1

目前的浏览器似乎不支持pushState标题属性。你可以通过在JS中设置它来轻松实现同样的事情。

document.title = "This is the new page title.";

Answer 2

如果您想要良好的 SEO，不建议使用

document.title

设置标题。

您可能需要考虑使用 History.js

History.js 优雅地支持 HTML5 历史/状态 API （pushState、replaceState、onPopState）在所有浏览器中。包括 继续支持数据、标题、replaceState。支持jQuery， MooTools 和原型。

演示

来源

Answer 3

当您使用history.pushState时，以下代码将更改页面标题

$(document).prop('title','your page title');

它也可以与 IE 一起使用。

Answer 4

目前，所有现代浏览器中的标题都可以使用history.push() 进行更改，但您必须更改URL。 如果你只添加“#locationhash”，它不会改变标题，这是有道理的。

Answer 5

如果您的目标只是标记历史条目，您可以在推送状态之前更改标题，然后恢复标题。由于所有操作都是同步的，因此这是有效的。

function pushState(state, title, url) {
    const currTitle = document.title;
    document.title = title;
    history.pushState(state, '', url);
    document.title = currTitle;
}

使用示例：

pushState({}, `(${x},${y}) ${x} Checkboxes`, hash);