Question

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

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

我注意到在更改hash时Chrome 10+中的内容：

类似于重装。

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

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

图标似乎正在重新加载。

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

Answer 1

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

由于a Chrome bug（提及pushState），网站图标和停止/刷新按钮会闪烁，但哈希更改是在相同的代码路径上）。
滚动时的轻微打嗝是因为Chrome会执行整页重绘以及更新页面缩略图的高质量比例，因为它正在考虑将哈希更改视为生成新网址。那也是a bug。您可以在检查器时间轴视图中看到这一点，大多数滚动事件会重新显示窗口宽度 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可能会有所帮助。

Answer 2

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

将哈希标记（＃）添加到值上（即使用window.location.hash =“＃etc”）。
注册window.onhashchange处理程序的处理程序。
或者，您可以考虑使用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错误。

window.location.hash在Chrome中刷新？

3 个答案: