我刚刚在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。
这里的答案都很古老。
在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));
});
后一个片段允许存在多个事件处理程序，而前者将替换任何可能导致难以找到的错误的现有处理程序。
请改用jQuery hashchange事件插件。关于完整的ajax导航，请尝试使用SEO友好的ajax。否则，您的页面在有JavaScript限制的浏览器中不会显示任何内容。
jQuery BBQ（返回按钮和查询库）
一个高质量的基于哈希的浏览器历史插件，截至本文撰写之时（jQuery 1.4.1）非常最新（2010年1月26日）。
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
另一个很棒的实现是balupton的jQuery History，如果浏览器支持它，它将使用本机onhashchange事件，如果不支持，它将为浏览器使用适当的iframe或间隔，以确保成功模拟所有预期的功能。它还提供了一个很好的接口来绑定到某些状态。
另一个值得注意的项目是jQuery-Ajaxy，它几乎是jQueryHistory的扩展，可以将ajax添加到混合中。当您开始使用ajax和hashes时，它会变得非常复杂！
我执行以下操作，如果您想使用它，请将它粘贴到一些位置，并将处理程序代码设置在注释的位置HashChanged（qs）中，然后每次加载ajax请求时调用changeHashValue（hashQuery）。这不是一个快速解决的答案，也没有，所以你需要考虑一下，并将合理的hashQuery参数（即a=1&b=2）传递给changeHashValue（hashQuery），然后在你的位置HashChanged（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();
尝试简单&轻量级PathJS库。
简单示例：
Path.map("#/page").to(function(){
alert('page!');
});