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，但哈希更改是
  在相同的代码路径上）。
• 滚动时出现的轻微问题是因为 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，所以有 debounce 插件 这可能会有所帮助。

Answer 2

我没有明确的答案，但首先我会尝试：

1. 在值前面添加哈希标记 (#)（即使用 window.location.hash = "#etc"）。
2. 为 window.onhashchange 处理程序注册一个处理程序。
3. 或者，如果您想要完成的任务是，您可以考虑使用 history.pushState使后退按钮返回到之前的逻辑位置（我不清楚您想要完成什么，是否只想跳转到页面上的某个部分，或者更复杂的内容）。

Answer 3

var r='#hello';
if(navigator.userAgent.indexOf('Chrome/')!=-1){
 top.history.pushState("", "", r);
 return;
};
if(r.charAt(0)=='/'){
  top.location.replace(r);
 }else{
  top.location.hash=r;
};

为我工作。事实上我花了很长时间才弄清楚这一点。 Firefox 现在还支持 history 对象，因此我们也许可以在几年内摆脱整个“哈希”事物。

编辑：是的，重新加载是 Chrome 的一个错误。