jquery – iOS上的Chrome back/forward不能与history.pushState一起使用?

前端之家收集整理的这篇文章主要介绍了jquery – iOS上的Chrome back/forward不能与history.pushState一起使用?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个网页,使用具有片段标识符(即#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'
  });

在iOS上使用Google Chrome,该地址按预期更新,滚动动画运行正常,但是后退/转发按钮不会转到已识别的标签

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

我仅在iOS上使用Google Chrome浏览器出现此问题; 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问题。

解决方法

iOS与HTML5历史记录API有很少的错误

你有没有尝试过:

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

这个插件可能是有用的(即使是背景阅读)History.js.它解决了跨浏览器的兼容性问题,并提供了一个可选的HTML4哈希后备,如果你想

原文链接:https://www.f2er.com/jquery/181873.html

猜你在找的jQuery相关文章