window.location.hash在Chrome中刷新？

Question

我正在网上做一些窥探,并发现window.location.hash = "etc"是一种广泛采用的方法来更新浏览器的位置而无需重新加载/刷新页面.我已经应用了这个例子我已经熟了:http://dl.dropbox.com/u/1595444/locationExample/index.html

适用于Safari,但......

我注意到的是,Chrome 10+在更改后hash:

有类似于重装的东西.

当用户向下或向上滚动时,产生的症状是打嗝.

我的控制台输出被保留(如果检查控制台,则输出项目字符串).

图标似乎正在重新加载.

有没有人遇到过这个问题？知道修复吗？

Answer 1

这里最有可能发生两件事:

• 由于Chrome错误(提及pushState,但散列更改位于相同的代码路径上),favicon和停止/刷新按钮会闪烁.
• 滚动时的轻微打嗝是因为Chrome执行整页重绘和高质量缩放以更新页面缩略图,因为它正在考虑将哈希更改视为生成新URL.这也是一个错误.您可以在检查器时间轴视图中看到这一点,大多数滚动事件会导致窗口宽度 x 重绘一些小高度,但偶尔会有一个全窗口重绘.这篇博文有一些更多细节.

两者的解决方法是推迟更新哈希,直到用户完成滚动(您仍然可以立即更新当前项下显示的白条).您可以通过以下方式执行此操作:

var scrollTimeout;
window.onscroll = function() {
  // update current item display here
  if (scrollTimeout)
    clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(function() {
    scrolTimeout = undefined;
     // update hash here
  }, 100);
};

因为看起来你正在使用jQuery,所以有一些可能有用的去抖动插件.