有没有办法在javascript中捕获后退按钮事件？

Question

当只有位置哈希改变时,有没有办法在javascript中响应后退按钮被击中(或按下退格键)？也就是说当浏览器没有与服务器通信或重新加载页面时.

Answer 1

使用hashchange活动:

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

如果您需要支持旧版浏览器,请查看Modernizr的HTML5 Cross Browser Polyfills维基页面中的" hashChange事件"部分.

Answer 2

我已经创建了一个可能对某些人有用的解决方案.只需在页面上包含代码,您就可以编写自己的函数,单击后退按钮时将调用该函数.

我已经在IE,FF,Chrome和Safari中进行了测试,并且都在运行.我已经基于iframe工作的解决方案,而不需要在IE和FF中进行常规轮询,但是,由于其他浏览器的限制,位置散列在Safari中使用.

Answer 3

我做了一个有趣的黑客来解决这个问题让我满意.我有一个动态加载内容的AJAX站点,然后修改window.location.hash,我有代码在$(document).ready()上运行来解析哈希并加载相应的部分.问题是我对我的部分加载导航代码感到非常满意,但是想添加一种拦截浏览器后退和前进按钮的方法,这会改变窗口位置,但不会干扰我操作当前页面加载例程window.location,以及以固定间隔轮询window.location是不可能的.

我最终做的是创建一个对象:

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

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

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

然后,任何时候我想修改window.location.hash不触发此页面加载例程,我只需在每window.location.hash =行之前添加以下行:

pageload.ignorehashchange = true;

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

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

所以现在我的部分加载例程通常在运行,但是如果用户点击"后退"或"前进"按钮,则会解析新位置并加载相应的部分.