检测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!'); });