检测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循环的情况下检测何时按下后退按钮（或检测哈希值何时变化）？ 当我尝试使用.2和1秒超时的那些时，它挂住了我的CPU。

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));
});

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

Answer 2

请改用jQuery hashchange事件插件。 关于您的完整Ajax导航，请尝试使用SEO友好的Ajax 。 否则，您的页面在具有JavaScript限制的浏览器中什么也不会显示。

Answer 3

jQuery BBQ （后退按钮和查询库）

一个高质量的基于哈希的浏览器历史记录插件， 截至撰写本文时（jQuery 1.4.1）都是最新的（2010年1月26日） 。

Answer 4

HTML5包含比使用hashchange更好的解决方案，后者是HTML5状态管理API- https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history-它们允许您更改页面的url，而无需使用哈希！

尽管HTML5状态功能仅可用于HTML5浏览器。 因此，您可能想使用History.js之类的东西，它为HTML4浏览器提供了向后兼容的体验（通过散列，但仍支持数据和标题以及replaceState功能）。

您可以在这里了解更多信息： https : //github.com/browserstate/History.js

Answer 5

balupton的jQuery History是另一个很好的实现，如果浏览器支持它，它将使用本机onhashchange事件；否则，它将为浏览器使用适当的iframe或间隔，以确保成功模拟所有预期功能。 它还提供了一个不错的接口来绑定到某些状态。

另一个值得注意的项目是jQuery Ajaxy ，它是jQuery History的扩展，可以将ajax添加到混合中。 当您开始使用带有哈希值的ajax时，它变得相当复杂 ！

Answer 6

试试简单轻量的PathJS lib。

简单的例子：

Path.map("#/page").to(function(){
    alert('page!');
});

Answer 7

如果您要使用它，请执行以下操作，然后将其粘贴到某个位置，并在注释的locationHashChanged（qs）中设置您的处理程序代码，然后在每次加载ajax请求时调用changeHashValue（hashQuery）。 它不是一个快速解决方案，也没有解决方案，因此您需要考虑一下，并将明智的hashQuery参数（即a = 1＆b = 2）传递给changeHashValue（hashQuery），然后在locationHashChanged中满足上述参数的每种组合（qs）回调...

// Add code below ...
function locationHashChanged(qs)
{
  var q = parseQs(qs);
  // ADD SOME CODE HERE TO LOAD YOUR PAGE ELEMS AS PER q !!
  // YOU SHOULD CATER FOR EACH hashQuery ATTRS COMBINATION
  //  THAT IS PASSED TO changeHashValue(hashQuery)
}

// CALL THIS FROM YOUR AJAX LOAD CODE EACH LOAD ...
function changeHashValue(hashQuery)
{
  stopHashListener();
  hashValue     = hashQuery;
  location.hash = hashQuery;
  startHashListener();
}

// AND DONT WORRY ABOUT ANYTHING BELOW ...
function checkIfHashChanged()
{
  var hashQuery = getHashQuery();
  if (hashQuery == hashValue)
    return;
  hashValue = hashQuery;
  locationHashChanged(hashQuery);
}

function parseQs(qs)
{
  var q = {};
  var pairs = qs.split('&');
  for (var idx in pairs) {
    var arg = pairs[idx].split('=');
    q[arg[0]] = arg[1];
  }
  return q;
}

function startHashListener()
{
  hashListener = setInterval(checkIfHashChanged, 1000);
}

function stopHashListener()
{
  if (hashListener != null)
    clearInterval(hashListener);
  hashListener = null;
}

function getHashQuery()
{
  return location.hash.replace(/^#/, '');
}

var hashListener = null;
var hashValue    = '';//getHashQuery();
startHashListener();