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

Question

我有一个网页,使用history.pushState片段标识符(ie #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 History API 方面存在相当多的错误。

你有没有尝试过：

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

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