Chrome在iOS上，使用history.pushState时，返回/前进按钮无法正常工作？

Question

我有一个网页在使用带有片段标识符（如#Heading1）的history.pushState和jQuery的animate方法来在文档内导航。

这是我如何导航到文档中的位置：

$('nav a').click(function(e){
  e.preventDefault();
  var href = $(this).attr('href');
  history.pushState(null, null, href);
  $('#address').val(location.pathname + href);

  $('html, body').animate({
    'scrollTop': $(href).offset().top + 'px'
  });

使用 Google Chrome 在 iOS 上，地址栏更新如预期，并且滚动动画正常，但是“后退/前进”按钮无法跳转到标识的标签。

需要注意的是，在使用“后退/前进”按钮时，地址栏中的URL确实已更改。它只是无法跳转到标识的标签。

我只在使用 Google Chrome 时遇到过这个问题，包括 iPhone 和 iPad。

我在 CodePen 上创建了一个带有子集代码的笔记本，可以演示问题：http：//codepen.io/Ghodmode/pen/YqKGga 更新： 我已经更新了我的笔记本电脑，使其在iPhone / iPad上进行测试变得更加容易。最好也使用调试视图：http：//s.codepen.io/Ghodmode/debug/YqKGga 更新2： 我在CodePen上创建了另一个页面，应该演示问题。这次没有使用jQuery：http：//s.codepen.io/Ghodmode/debug/jqOqpq 我还不能测试它，因为我没有直接访问iPhone / iPad，但我真的不认为这个问题与jQuery有任何关系。

它在以下设备上运行良好： - Safari on iPhone / iPad - Google Chrome on Android - Mozilla Firefox on Android - Google Chrome on Windows - Mozilla Firefox on Windows - Internet Explorer on Windows

需要注意的是，我没有iOS设备可以测试，在这方面我有一个可靠的测试人员向我发送任何问题的视频和截屏。

既然动画正常工作，则似乎不是jQuery的问题。

- Vince

---

我似乎找不到任何实质性的东西，但我已经从搜索_chrome ios hashchange_转换为_ios webview hashchange_，因为iOS上的Chrome只是包装在UIWebView周围的UI。 - Vince

这个 Chromium 的 bug 报告似乎证实了在 iOS 上的 Chrome 浏览器在点击后退按钮时不会触发 hashchange 事件，但我无法想象为什么这么少的人注意到了这一点。 - Vince

这个问题有任何更新吗？一年过去了，我看到同样的问题，无法在iOS上使用Google Chrome操作历史记录（/返回按钮），但在其他任何地方都可以，包括iOS上的Safari。 - adrianTNT

@adrianTNT 我没有任何更新。我甚至不记得这个问题了。我链接的错误报告说，该问题已在2016年1月底发布的版本中修复，但似乎并非如此。你测试的设备有可能还没有更新，但这也意味着你页面/应用的大部分目标受众都没有更新。我认为这个问题没有解决方案。 - Vince

我在iPhone SE和iPhone 7上遇到了这个问题，它们都已更新至最新的iOS版本并使用最新的Google Chrome浏览器。但在Safari和其他所有浏览器中都可以正常工作。 - adrianTNT

Answer 1

iOS存在许多与HTML5历史记录API相关的错误。

您尝试过吗：

window.addEventListener("popstate", function(e) {
    window.location.href = location.href;
});

这个插件可能会有些用处（即使只是作为后台阅读）History.js。它解决了跨浏览器兼容性问题，并且还提供了一个可选的HTML4哈希回退功能，如果您需要的话。

- Oam Psy