javascript - 如何添加浏览器历史状态？

Question

所以我看到很多人推荐隐藏的iFrame hack，即jQuery history plugin但我真正需要的是这项技术的另一半:

function whenItemIsClicked()
    {
    window.location.hash = this.id;
    //some other stuff, like Ajax
    }

//and then, if page is reloaded...
$(document).ready(function(){
    var loc = window.location.hash;
    //if there happens to be a hash, navigate to corresponding content
    if(loc != '') $(loc).click();
});

这两个都很好用。现在，我想附上这两行

  var loc = window.location.hash;
  if(loc != '') $(loc).click();

一个事件，但似乎没有一个会被后退按钮持续触发。有没有办法添加一个浏览器历史记录状态来保存当前的 URL，这样上面的技术就可以工作了？

Answer 1

有一个事件叫做 window.onhashchange虽然不是每个人都支持它，但是... there's a plugin by Ben Alman解决那个问题。

该插件通过使用 window.onhashchange( native 事件)使其跨浏览器工作(如果存在)。如果没有，它会每 50 毫秒轮询一次，并在哈希发生变化时触发事件本身。使用the plugin ，您的代码将如下所示:

$(window).hashchange(function() {
  var loc = window.location.hash;
  if(loc != '') $(loc).click();    
});

您只需要将代码放在一个地方。您可以在 document.ready 中触发它一次，方法是在它像上面那样绑定(bind)后触发事件:

$(function(){
  $(window).hashchange();
});