Question

我的网页使用history.pushState和片段标识符（例如#Heading1）和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'
  });

在iOS上使用谷歌浏览器，地址按预期更新，滚动动画工作正常，但后退/前进按钮不会转到识别的标签。

我应该注意，使用后退/前进按钮时，地址栏中的URL 已更改。它只是没有找到标识的标签。

我在iOS上使用谷歌浏览器时才看到这个问题; iPhone和iPad都有。

我在CodePen上创建了一个 Pen ，其中包含了我的代码子集，可以证明这个问题： ~~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有什么关系。

它适用于：

iPhone / iPad上的Safari
Android版Google Chrome
Android上的Mozilla Firefox
Windows上的Google Chrome
Windows上的Mozilla Firefox
Windows上的Internet Explorer

我应该注意到，我个人没有任何iOS设备可以测试，但我确实有一个可靠的测试人员向我发送任何问题的视频和截图。

由于动画按预期工作，它似乎不是一个jQuery问题。

Answer 1

iOS在HTML5历史记录API中存在一些错误。

你试过了吗？

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

此插件可能有一些用处（即使是背景阅读）History.js。它解决了跨浏览器兼容性问题，并且如果您愿意，还提供可选的HTML4哈希回退

iOS上的Chrome; back / forward不能与history.pushState一起使用？

1 个答案: