javascript - 检测 URL 中的后退按钮/哈希更改

Question

我刚刚在 http://ritter.vg 设置了我的新主页。我正在使用 jQuery，但使用量非常少。
它使用 AJAX 加载所有页面 - 我将其设置为允许通过检测 URL 中的哈希值来添加书签。

 //general functions
 function getUrl(u) {
      return u + '.html';
 }
 function loadURL(u)    {
      $.get(getUrl(u), function(r){
                $('#main').html(r);
           }
      );
 }
 //allows bookmarking
 var hash = new String(document.location).indexOf("#");
 if(hash > 0)
 {
      page = new String(document.location).substring(hash + 1);
      if(page.length > 1)
        loadURL(page);
      else
        loadURL('news');
 }
 else
      loadURL('news');

但我无法使后退和前进按钮正常工作。

有没有一种方法可以在不使用 setInterval 循环的情况下检测何时按下后退按钮(或检测何时哈希更改)？当我尝试使用 0.2 秒和 1 秒超时时，它与我的 CPU Hook 。

Answer 1

这里的答案都很旧了。

在 HTML5 世界中，您应该使用 onpopstate事件。

window.onpopstate = function(event)
{
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

或者:

window.addEventListener('popstate', function(event)
{
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
});

后一个代码片段允许存在多个事件处理程序，而前者将替换任何现有的处理程序，这可能会导致难以发现的错误。