History API 在现代浏览器中是否一致？

Question

历史 API 现在是 supported in every popular browser。似乎不再需要哈希回退、_escaped_fragment_ 技巧或other workarounds。像 History.js 这样 2013 年的酷库现在似乎没用了。但是有些事情我不确定 - 例如title handling seems tricky 因为显然title 中的title 参数没有做任何事情。

我的问题是，我真的可以依靠 History API 在浏览器之间保持一致吗，还是我仍然需要一些特定于浏览器的代码？这也意味着：我是否需要在不同的浏览器中运行集成测试来测试我的代码？如果存在不一致，它们是什么？ （注意我只对 现代 浏览器感兴趣，所以没有 IE

也许为大型 SPA 实施路由的人可以分享他们的经验？

Answer 1

Android 4 版本之前的 History API 存在一些问题，但通常它在所有主要浏览器中都能正常运行。

Answer 2

其实可以通过history lib看到所有支持的浏览器：https://github.com/browserstate/history.js/#browsers-tested-and-working-in

这个库解决的错误列表，来自同一页面：

• HTML5 浏览器
  • Chrome 8 有时在返回初始状态时不包含正确的状态数据
  • Safari 5、Safari iOS 4 和 Firefox 3 和 4 在页面加载有哈希时不会触发 onhashchange 事件
  • 与其他浏览器不同，当哈希值发生变化时，Safari 5 和 Safari iOS 4 不会触发 onpopstate 事件
  • 一旦哈希被replaceState 调用/bug report 替换，Safari 5 和 Safari iOS 4 将无法返回正确状态
  • Safari 5 和 Safari iOS 4 有时无法在繁忙条件下应用状态更改 / bug report
  • RC 之前的 Google Chrome 8、9、10 和 Firefox 4 将始终在页面加载后触发 onpopstate / change recommendation
  • Safari iOS 4.0、4.1、4.2 有一个有效的 HTML5 History API - 尽管浏览器的实际后退按钮不起作用，因此我们将它们视为 HTML4 浏览器
  • 没有一个 HTML5 浏览器实际上在 pushState 和 replaceState 调用中使用了 title 参数
• HTML4 浏览器
  • 旧版浏览器（例如 MSIE 6,7 和 Firefox 2）没有onhashchange 事件
  • MSIE 6 和 7 有时即使被告知也不应用哈希（需要再次调用 apply 函数）
  • 当哈希值不是urlencoded 时，非 Opera HTML4 浏览器有时不应用哈希值
• 所有浏览器
  • 离开网站然后返回（包括页面刷新）后，状态数据和标题不会保留
  • 州头衔永远不会应用于document.title

这可能会告诉您一些关于现有差异的信息。

Answer 3

注意：这不是一个完整的答案，所以我不期待赏金，但它仍然解决了一些问题，所以我决定把它作为答案

与大多数 API 仍然存在一些差异（您不会相信浏览器之间的 classList 有多么不一致）；问题主要是它们有多严重。

pushState 最常用于 SPA，它们似乎忽略了 object 参数并主要处理 URL。这意味着与状态对象处理相关的错误对于公众来说可能不太“可见”。

我最近发现影响我所做的唯一问题是，在 IE 和 Edge（甚至 14 个）中，history.state 是一个吸气剂，因此它在每次访问时都会获得一个新的对象实例。这意味着您无法缓存状态对象并将其与history.state 进行比较以查看是否推送了新对象。这是错误报告：https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/944050/

另外，请注意，没有浏览器支持通过pushState 设置标题，也没有人支持，为时已晚。如果浏览器开始支持它，pushState-using 站点会突然清除浏览器历史记录中的所有标题，因为代码在那里传递了空字符串。你只需要接受第二个参数是无用的。