页面标题不会因为history.pushState而改变。

Question

我刚在Google Chrome浏览器中打开了一个空白的HTML页面，并添加了一些基本标签（比如html、body、head等），然后尝试在控制台中执行以下命令：

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

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

- avasin

---

显然这是当前浏览器已知的问题 - 它们都不支持自动替换。http://engineering.twitter.com/2012/12/implementing-pushstate-for-twittercom_7.html - Kirill

@Kirill，适用于Safari和Opera，请参见http://stackoverflow.com/q/26316325/632951。但在Chrome / FireFox上无法正常工作，请参见https://dev59.com/r18d5IYBdhLWcg3w41gp。 - Pacerier

这是2023年。这在Chrome和可能所有其他现代浏览器中都有效。但它不是自动的。您必须确保在每次推送/弹出状态后设置document.title。 - John Henckel

Answer 1

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

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

- Kirill

---

当你点击返回按钮时，它仍然保持不变。 - siniradam

@Kirill，这个怎么会有10个赞？这不起作用。不起作用！ 所有历史记录条目的标题最终都将相同，请参见https://dev59.com/r18d5IYBdhLWcg3w41gp - Pacerier

如果您想要良好的SEO效果，不建议使用document.title来设置标题。 - Rahul Desai

当人们因为多种原因抱怨它无法正常工作时，应与pushState和replaceState一起使用。更具体地说，这应该在popstate监听器中操作，以确保相应地更新document.title。 - Leonard

@RahulDesai：通常使用title/history的人是为了进行性能优化（shell架构，无限分页等）。这些页面已经对搜索引擎不可见，所以在这一点上担心SEO是毫无意义的。通常情况下，通过history API生成的每个URL也将是一个有效的独立URL，并具有适当的标题；document.title仅在模拟导航以避免完全刷新页面时使用。 - Brian

Answer 2

使用document.title设置标题不推荐，如果您想要良好的SEO效果，建议您考虑使用History.js。

History.js在所有浏览器中优雅地支持HTML5 History / State API（pushState，replaceState，onPopState），包括数据、标题、replaceState的持续支持。支持jQuery、MooTools和Prototype。

演示 来源

- Rahul Desai

---

这对我来说确实效果更好...解决了许多问题。 - Stonetip

SEO和javascript有什么关系？我曾经认为pushState只应在触发页面中的JS时避免重新加载。 - Will S

History.js确实是一项伟大的努力和良好的项目，但不幸的是，它已经多年没有得到开发和维护。它有大量的问题和错误。我强烈建议不要使用它，除非一个人真正需要广泛的浏览器支持（在我看来这已经不那么重要了）。 - Zoltán Tamási

历史记录做的是相同的事情……尝试更改标题元素，如果无法更改，则使用DOM设置它。 - Maxim

Answer 3

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

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

它也可以在IE上运行。

- S.Akruwala

---

jQuery 的不必要使用 - Zander Brown

@AlexB：如果您有更好的方法，请建议！要求还包括更改页面标题。如果您已经使用js使用“history.push”，那么使用jquery设置标题有什么问题呢？ - S.Akruwala

因为对于 history.push 而言，不需要 jQuery，而 document.title = 'your page title'; 可以完美地完成这项任务（并且本质上也是 jQuery 在内部执行的操作）。 - Zander Brown

Answer 4

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

- Martin Zvarík