在URL检测后退按钮/哈希变化在URL检测后退按钮/哈希变化(Detecting Back Butt

我刚刚成立我的新主页在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。

Answer 1:

使用jQuery的hashchange事件插件来代替。 关于你提到的全AJAX导航，尽量让搜索引擎友好的阿贾克斯 。 否则，在没有使用JavaScript的浏览器限制显示您的网页。

Answer 2:

这些问题的答案在这里都是很老。

在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 3:

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

A-基于散列高品质的浏览器插件的历史和非常先进的日期（2010年1月26日），截至记者发稿（jQuery的1.4.1） 。

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的历史 ，这将使用本地onhashchange事件，如果它是由浏览器的支持，如果没有它会适当地使用iframe或间隔的浏览器，以确保所有预期的功能被成功效仿。 它也提供了一个很好的接口绑定到特定的状态。

另一个项目值得一提的还有是jQuery的Ajaxy这是相当多的扩展jQuery的历史记录，以AJAX加进来。 正如当你开始使用Ajax和哈希得到它的相当复杂的 ！

Answer 6:

我这样做，如果你想使用它，然后将其粘贴在一些地方，并设置你的处理程序代码在locationHashChanged（QS），其中评论，然后调用changeHashValue（hashQuery）每次加载一个Ajax请求。 它不是一个速战速决的答案，并没有，所以你需要考虑一下，并通过合理的hashQuery ARGS（即A = 1＆B = 2）changeHashValue（hashQuery），然后迎合每个组合的说，你locationHashChanged ARGS （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();

Answer 7:

尝试简单轻巧PathJS库。

简单的例子：

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

文章来源: Detecting Back Button/Hash Change in URL