我有一个网页,使用具有片段标识符(即#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代码的一部分,该代码应该会显示问题:@L_502_1@
更新:
我更新了笔,使其在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哈希后备,如果你想