检测URL中的后退button/哈希变化
我刚在http://ritter.vg上build立了我的新主页。 我正在使用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'); 但是我无法获得后退和前进的button。
有没有办法检测后退button何时被按下（或检测何时散列更改），而不使用setInterval循环？ 当我用0.2和1秒的超时时间来testing时，它跟我的CPU挂钩。
改为使用jQuery的hashchange事件插件。 关于你的完整的ajax导航，尝试有SEO友好的ajax 。 否则，您的网页在JavaScript限制的浏览器中不会显示。
这里的答案都很古老。
在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)); });
后面的代码片段允许存在多个事件处理程序，而前者将replace可能导致难以发现的错误的任何现有处理程序。
jQuery烧烤 （后退button和查询库）
一个高质量的基于哈希的浏览器历史logging插件，并且在撰写本文时（jQuery 1.4.1）非常新颖（2010年1月26日） 。
HTML5包含了比使用HTML5状态pipe理API（ https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history）的; hashchange更好的解决scheme – 它们允许您更改页面的URL，而无需使用散列！
尽pipeHTML5状态function仅适用于HTML5浏览器。 所以你可能想要使用像History.js这样的提供向后兼容的经验HTML4浏览器（通过散列，但仍支持数据和标题，以及replaceStatefunction）的东西。
你可以在这里阅读更多关于它的信息： https ： //github.com/browserstate/History.js
另一个很好的实现是balupton的jQuery History ，如果浏览器支持的话，它将使用本地的onhashchange事件，如果不是，它将使用适当的iframe或时间间隔，以确保所有预期的function被成功模拟。 它还提供了一个很好的界面来绑定到某些状态。
另一个值得注意的项目是jQuery Ajaxy ，它几乎是jQuery History的扩展，可以添加ajax。 当你开始使用哈希值的时候，它变得相当复杂 ！
我做了以下，如果你想使用它，然后将其粘贴到某处，并将处理程序代码设置为whereHashChanged（qs），然后在每次加载ajax请求时调用changeHashValue（hashQuery）。 它不是一个快速修复的答案，没有，所以你需要考虑它，并通过敏感的hashQuery参数（即a = 1＆b = 2）来改变hash值（hashQuery），然后迎合你的locationHashChanged （qs）callback…
// 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!'); });
