当只有位置哈希改变时,有没有办法在javascript中响应后退按钮被击中(或按下退格键)?也就是说当浏览器没有与服务器通信或重新加载页面时.
使用hashchange
活动:
window.addEventListener("hashchange", function(e) { // ... })
如果您需要支持旧版浏览器,请查看Modernizr的HTML5 Cross Browser Polyfills维基页面中的" hashChange
事件"部分.
我已经创建了一个可能对某些人有用的解决方案.只需在页面上包含代码,您就可以编写自己的函数,单击后退按钮时将调用该函数.
我已经在IE,FF,Chrome和Safari中进行了测试,并且都在运行.我已经基于iframe工作的解决方案,而不需要在IE和FF中进行常规轮询,但是,由于其他浏览器的限制,位置散列在Safari中使用.
我做了一个有趣的黑客来解决这个问题让我满意.我有一个动态加载内容的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);
所以现在我的部分加载例程通常在运行,但是如果用户点击"后退"或"前进"按钮,则会解析新位置并加载相应的部分.