关于禁止页面后退的一些方法

最近在项目中遇到登录页面进行跳转到主页,退出登录跳转到登录界面等,发现浏览器默认的后退按钮很是蛋疼,因为项目上是尽量前端去保存用户状态,没有后台进行session校验,故跳转的时候要注意的是后退按钮的禁用,找了几种方法,感觉不错,分享出来。

①在IE9及其以上,各种主流浏览器上
使用浏览器history这个api,HTML5中新引入的pushState()和 replaceState()方法则是首选。 由于两者作用差不多,只讲其中一种pushState()
使用方法:history.pushState(stateObject,title,URL)
pushState是一个历史记录的管理的方法,其中stateObject是一个对象,存储于这条历史相关的状态信息,通常写为null即可,title取标题,也取null,URL是URL的历史记录的意思,即给这个窗口的历史记录添加一个URL,并不是会页面进行跳转的意思。具体使用如下:


image.png

之后动态去监控popstate的后退或者前进内容,触发的时候调用history.pushState(stateObject,title,URL),那么做到用户后退时一直进去的是我们添加的那个历史记录里。

②IE9以下的低版本浏览器
这类浏览器没有pushState()方法,也做不到动态监控popstate的内容了,此时的浏览器只有hash哈希地址的变化的监控(浏览器的url后用#接地址来完成页面变化的方式),此时操控浏览器的历史通过window.location.hash来完成,具体如下


image.png

在一开始的时候固定一个哈希,在浏览器的后退或前进时url发生改变时,那么利用window.onhashchange事件监听变化,再进行固定即可。

经过以上两种方法,可以解决禁用后退功能按钮的问题

个人项目上使用第一种


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容