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

时间:2008-09-25 23:45:13

标签: javascript

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

6 个答案:

答案 0 :(得分:28)

使用hashchange事件:

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

如果您需要支持旧浏览器,请查看Modernizr的HTML5跨浏览器Polyfills维基页面中的hashChange Event section

答案 1 :(得分:12)

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

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

答案 2 :(得分:7)

我做了一个有趣的黑客来解决这个问题让我满意。我有一个动态加载内容的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
        };
    }
};

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

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

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

pageload.ignorehashchange = true;

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

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

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

答案 3 :(得分:3)

结帐history.js。有一个html 5状态转换事件,你可以听它。

答案 4 :(得分:1)

onLocationChange也可能有用。不确定这是否只是一个Mozilla的东西,看起来可能是。

答案 5 :(得分:1)