62

我刚刚在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 挂钩。

4

7 回答 7

49

这里的答案都很老了。

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

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

于 2012-12-06T15:49:55.497 回答
31

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

于 2008-10-06T02:46:02.530 回答
12

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

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

于 2010-02-03T16:42:31.847 回答
11

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

于 2011-01-30T14:02:17.840 回答
2

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

另一个值得注意的项目是jQuery Ajaxy，它几乎是 jQuery History 的一个扩展，用于添加 ajax。当您开始使用带有哈希的 ajax 时，它变得非常复杂！

于 2010-08-28T17:47:01.533 回答
1

我执行以下操作，如果您想使用它，然后将其粘贴到某个位置并将处理程序代码设置在 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();
于 2011-04-18T19:53:07.387 回答
1

尝试简单轻量的 PathJS库。

简单的例子：

Path.map("#/page").to(function(){
    alert('page!');
});
于 2012-04-19T18:16:31.713 回答