有没有办法在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);

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