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

Posted 2023-02-22

【中文标题】页面标题不会被 history.pushState 改变

【英文标题】：Page title is not changed by history.pushState

【发布时间】：2012-12-06 23:46:00

【问题描述】：

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

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

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

【问题讨论】：

显然这是当前浏览器的一个已知问题 - 它们都不支持自动替换。 engineering.twitter.com/2012/12/…

@Kirill，适用于 Safari 和 Opera，请参阅 ***.com/q/26316325/632951 。但不适用于 Chrome/FireFox，请参阅 ***.com/q/26324990/632951

【参考方案1】：

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

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

【讨论】：

点击后退按钮怎么样？它保持不变。

@Kirill，这是如何获得 10 票的？这不起作用。 不起作用！所有历史记录条目最终都将具有相同的标题，请参阅***.com/q/26324990/632951

如果您想要好的 SEO，不建议使用 document.title 设置标题。

如果人们抱怨它由于多种原因不起作用，这应该与 pushState 和 replaceState 结合使用。更具体地说，这应该在 popstate 侦听器中运行，以确保 document.title 相应地更新。

@RahulDesai：一般来说，使用title/history的人这样做是为了优化性能（shell架构、无限分页等）。此类页面已经对搜索引擎不可见，因此此时担心 SEO 毫无意义。通常，通过历史 API 生成的每个 URL 也将是具有适当标题的有效独立 URL； document.title 仅在模拟导航时使用以避免整页刷新。

【参考方案2】：

如果您想要好的 SEO，不建议使用 document.title 设置标题。

您可以考虑使用History.js

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

Demo

Source

【讨论】：

它确实对我来说效果更好...解决了一堆问题。

SEO 与 javascript 有什么关系？我的印象是 pushState 应该只用于在页面中触发 JS 时避免重新加载。

History.js 确实是一个很大的努力和一个很好的项目，但遗憾的是没有开发，甚至多年没有维护。它有很多问题和错误。我强烈建议不要这样做，除非一个真的需要广泛的浏览器支持（现在 IMO 越来越不相关了）。

History 做同样的事情...只是尝试更改标题元素，如果没有，然后使用 DOM 设置它。

【参考方案3】：

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

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

它也适用于 IE。

【讨论】：

不必要地使用 jQuery

@AlexB ：如果有的话，请提出更好的方法！要求也是更改页面标题。现在如果你已经在使用“history.push”的js，那么使用jquery设置标题有什么问题？

因为 history.push 不需要 jQuery，而 document.title = 'your page title'; 完美地完成了这项工作（本质上是 jQuery 内部所做的）

【参考方案4】：

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