iOS上的Chrome; back / forward不能与history.pushState一起使用？ [英] Chrome on iOS; back/forward doesn't work with history.pushState?

问题描述

我有一个使用 history.pushState 的网页，其中包含片段标识符（即 #Heading1 ）和jQuery的< a href =https://api.jquery.com/animate/> 动画 方法在文档中导航。

I have a web page that uses history.pushState with fragment identifiers (i.e. #Heading1) and jQuery's animate method to navigate within the document.

这是我导航到文档中某个位置的方式：

This is how I navigate to a location in the document:

$('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上使用谷歌浏览器，地址按预期更新，滚动动画工作正常，但后退/前进按钮不会转到识别的标签。

Using Google Chrome on iOS, the address is updated as expected and the scroll animation works fine, but the back / forward buttons don't go to the identified tags.

我应该注意，当使用后退/前进按钮时，地址栏中的URL被更改。它只是不会去确定标签。

I should note that when using the back / forward buttons, the URL in the address bar is changed. It just doesn't go to the identified tag.

我在iOS上使用Google Chrome时才看到此问题; iPhone和iPad。

I've only seen this problem using Google Chrome on iOS; both iPhone and iPad.

我在CodePen上创建了一个 Pen ，其中包含了我的代码子集，可以证明问题： http://codepen.io/Ghodmode/pen/YqKGga

I've created a Pen at CodePen with a subset of my code that should demonstrate the problem: 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有什么关系。

I haven't been able to test this yet because I don't have direct access to iPhone / iPad, but I really don't think the problem has anything to do with jQuery.

它适用于：

• iPhone / iPad上的Safari


• Android上的谷歌浏览器


• Android上的Mozilla Firefox


• Windows上的Google Chrome浏览器


• Windows上的Mozilla Firefox


• Windows上的Internet Explorer

• 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设备来测试这个，但我确实有一个可靠的测试人员向我发送任何问题的视频和截图。

I should probably note that I don't personally have any iOS devices to test this on, but I do have a reliable tester sending me videos and screenshots of any problems.

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

Since the animation works as expected, It doesn't seem like a jQuery problem.

推荐答案

iOS HT有一些公平的错误ML5历史API。

iOS has a fair few bug with the HTML5 History API.

您是否尝试过：

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

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

This plugin may be of some use (even for background reading) History.js. It solves the cross-browser compatibility problems and also provides an optional HTML4 hash fallback if you'd like

这篇关于iOS上的Chrome; back / forward不能与history.pushState一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！