有没有办法在JavaScript中捕捉后退button事件?

有没有一种方法来响应后退button被击中(或退格被按下)在JavaScript中只有位置哈希值更改? 也就是说,当浏览器不与服务器通信或重新加载页面时。

使用hashchange事件:

 window.addEventListener("hashchange", function(e) { // ... }) 

如果您需要支持旧浏览器,请查看Modernizr的HTML5跨浏览器Polyfills wiki页面中的hashChange Event部分 。

我已经创build了一个可能对某些人有用的解决scheme 。 只需在页面上包含代码,您就可以编写自己的函数,单击后退button时会调用该函数。

我已经在IE,FF,Chrome和Safari中进行了testing,并且都在工作。 在IE和FF中,我使用的基于iframe的解决scheme不需要持续轮询,但是由于其他浏览器的限制,Safari中使用了位置散列。

我做了一个有趣的黑客解决这个问题,我满意。 我有一个dynamic加载内容的AJAX站点,然后修改window.location.hash,我有代码运行$(document).ready()parsing散列和加载适当的部分。 事情是,我非常满意我的部分加载导航代码,但想要添加拦截浏览器的前进和后退button,这改变了窗口的位置,但不会干扰我当前的页面加载例程,我操纵window.location,并以不变的间隔轮询window.location是不可能的。

我最终做的是创build一个对象,如下所示:

 var pageload = { ignorehashchange: false, loadUrl: function(){ if (pageload.ignorehashchange == false){ //code to parse window.location.hash and load content }; } }; 

然后,我添加了一行到我的站点脚本,以在hashchange事件上运行pageload.loadUrl函数,如下所示:

 window.addEventListener("hashchange", pageload.loadUrl, false); 

然后,无论window.location.hash我想修改window.location.hash而不触发这个页面加载例程,我只需在每个window.location.hash = line之前添加以下行:

 pageload.ignorehashchange = true; 

然后在每个哈希修改行之后的下一行:

 setTimeout(function(){pageload.ignorehashchange = false;}, 100); 

所以现在我的部分加载例程通常在运行,但是如果用户点击“后退”或“前进”button,则parsing新的位置并加载相应的部分。

查看history.js 。 有一个HTML 5 statechange事件,你可以听它。

onLocationChange也可能有用。 不知道这是不是Mozilla的东西,似乎可能是。