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 event插件。关于完整的ajax导航，请尝试SEO friendly ajax。否则，您的页面在具有JavaScript限制的浏览器中不会显示任何内容。

Answer 3

jQuery BBQ (Back Button & Query Library)

基于哈希的高质量浏览器历史记录插件，非常up-to-date (Jan 26, 2010) as of this writing (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 History，如果浏览器支持它将使用本机onhashchange事件，否则它将适当地使用iframe或间隔用于浏览器以确保成功模拟所有预期的功能。它还提供了一个很好的接口来绑定某些状态。

另一个值得注意的项目是jQuery Ajaxy，它几乎是jQuery History的一个扩展，可以添加ajax。当你开始使用带有哈希的ajax时，它会得到quite complicated！

Answer 6

我执行以下操作，如果您想使用它，然后将其粘贴到某个位置并在locationHashChanged（qs）中设置处理程序代码，并在每次加载ajax请求时调用changeHashValue（hashQuery）。它不是一个快速修复的答案而且没有，所以你需要考虑它并将合理的hashQuery args（即a = 1＆amp; b = 2）传递给changeHashValue（hashQuery），然后满足所述args的每个组合。你的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();

Answer 7

尝试简单＆amp;轻量级PathJS lib。

简单示例：

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

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

7 个答案: