最近在项目中遇到登录页面进行跳转到主页,退出登录跳转到登录界面等,发现浏览器默认的后退按钮很是蛋疼,因为项目上是尽量前端去保存用户状态,没有后台进行session校验,故跳转的时候要注意的是后退按钮的禁用,找了几种方法,感觉不错,分享出来。
①在IE9及其以上,各种主流浏览器上
使用浏览器history这个api,HTML5中新引入的pushState()和 replaceState()方法则是首选。 由于两者作用差不多,只讲其中一种pushState()
使用方法:history.pushState(stateObject,title,URL)
pushState是一个历史记录的管理的方法,其中stateObject是一个对象,存储于这条历史相关的状态信息,通常写为null即可,title取标题,也取null,URL是URL的历史记录的意思,即给这个窗口的历史记录添加一个URL,并不是会页面进行跳转的意思。具体使用如下:
之后动态去监控popstate的后退或者前进内容,触发的时候调用history.pushState(stateObject,title,URL),那么做到用户后退时一直进去的是我们添加的那个历史记录里。
②IE9以下的低版本浏览器
这类浏览器没有pushState()方法,也做不到动态监控popstate的内容了,此时的浏览器只有hash哈希地址的变化的监控(浏览器的url后用#接地址来完成页面变化的方式),此时操控浏览器的历史通过window.location.hash来完成,具体如下
在一开始的时候固定一个哈希,在浏览器的后退或前进时url发生改变时,那么利用window.onhashchange事件监听变化,再进行固定即可。
经过以上两种方法,可以解决禁用后退功能按钮的问题
个人项目上使用第一种