Chrome中window.location.hash刷新的问题？

Question

我在网上找到了一种被广泛采用的方法来更新浏览器的位置而不重新加载/刷新页面，那就是window.location.hash = "etc"。我已经把它应用到了这个例子中：http://dl.dropbox.com/u/1595444/locationExample/index.html。在Safari中运作良好，但是...

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

有类似于重新加载的东西。

结果的症状是用户向下或向上滚动时会出现一个小故障。

我的控制台输出被保留了（如果你检查你的控制台，项目字符串会被输出）。

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

有人遇到过这个问题吗？知道解决方法吗？

- jonobr1

Answer 1

这里可能有两个问题:

• 网站图标和停止/刷新按钮会闪烁，这是因为Chrome bug导致的（提到了pushState，但哈希变化在同一代码路径上）。
• 滚动时出现轻微的卡顿是因为 Chrome 进行全页面重绘和高质量缩放来更新页面缩略图，因为它认为哈希变化会生成新的 URL。这也是一个 bug。您可以在检查器时间轴视图中看到这一点，大多数滚动事件会导致 window width x some small height 的重新绘制，但偶尔会进行全窗口重新绘制。这篇博客文章有更多细节。

解决这两个问题的方法是将哈希更新推迟到用户完成滚动后（仍然可以立即更新当前项下方出现的白色条）。您可以通过以下方式实现：

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

看起来您正在使用jQuery，因此可能会有防抖插件可以帮助您。

- Mihai Parparita

---

目前只有在没有设置哈希值的情况下才能跳转到锚点（例如：your.tld/blog#comment-1）。要跳转到新的锚点，您必须将哈希值设置为 null（window.location.hash = null），然后再应用新的哈希值（window.location.hash = '#comment-2'），这样就可以正常工作了。希望这能帮助到某些人。 - daslicht

Answer 2

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的一个错误。

- Zdenek

Answer 3

我没有一个确定的答案，但是首先我会尝试：

1. 在值前面加上井号(#)（例如使用 window.location.hash = "#etc"）。
2. 注册一个 window.onhashchange 处理程序。
3. 或者，如果你试图让返回按钮返回到先前的逻辑位置（我不清楚你想要实现什么，是只想跳转到页面上的一个部分，还是更复杂的东西），你可以考虑使用 history.pushState。

- Michael Aaron Safyan

---

http://groups.google.com/a/chromium.org/group/chromium-discuss/browse_thread/thread/5e8cc6b1ee6c470f - jonobr1