javascript - window.location.hash 在 Chrome 中刷新？

Question

我在网上做了一些窥探，发现 window.location.hash = "etc" 是一种广泛采用的更新浏览器位置的方法，无需重新加载/刷新页面。我已将其应用于我编写的这个示例:http://dl.dropbox.com/u/1595444/locationExample/index.html

在 Safari 中运行良好，但是......

我注意到在 Chrome 10+ 中更改 hash 时:

有类似reload的东西。

由此产生的症状是用户向下或向上滚动时出现打嗝。

我的控制台输出已保留(如果您检查控制台，则会输出项目字符串)。

网站图标似乎正在重新加载。

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

Answer 1

这里很可能发生了两件事:

• 由于 a Chrome bug，图标和停止/刷新按钮闪烁(提到了 pushState，但散列变化是 在相同的代码路径上)。
• 滚动时出现轻微的问题是因为 Chrome 执行了整页重绘和高质量缩放以更新页面缩略图，因为它正在将哈希更改视为生成新 URL。那也是a bug .您可以在检查器时间轴 View 中看到这一点，大多数滚动事件会导致重绘窗口宽度 x 一些小高度，但偶尔会有全窗口重绘。 This blog post还有一些细节。

两者的解决方法是将散列的更新推迟到用户完成滚动(您仍然可以立即更新出现在当前项目下方的白色条)。你可以通过类似的东西来做到这一点:

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

因为看起来你在使用 jQuery，所以有 debouncing plugins这可能会有帮助。