单页面网站禁用浏览器后退键

该文章适用于angularjs创建的单页面应用SPA,如vuejs或react.js不在本文讨论范围内。

我用angularjs和sb-admin2实现了前端框架,在不考虑浏览器后退键的情况下,是用$state和$stateParams实现后退功能的,当然也可以自己创建全局单例或是localstroge、sessionstorge处理历史跳转数据。

项目上线后,客户反应当页面跳转到3级或4级页面,点击浏览器后退键时,页面返回上级页面后提示缺少参数,页面的数据也是空白的,为了解决这一问题,我的解决方案是禁用浏览器后退键,下面是解决方法:

在angular.module("appId").run()方法中,用$locationChangeStart监听url地址变化。代码如下:

$rootScope.$on('$locationChangeStart',function(ev,to,from){
    if($rootScope.previousState && $rootScope.nowState && $rootScope.previousState == to)
    {
        console.log('not back');
        ev.preventDefault();
    }
    else{
        $rootScope.previousState = from;
        $rootScope.nowState = to;
    }
});

这样之前的问题就可以避免了,但是我也发现了一个小bug。虽然禁用了浏览器的后退键,用户点击业务页面上的返回按钮时,页面虽然成功返回到上一页面,但是浏览器地址栏的url没有变,当再次点击返回按钮时url又变回正常。

因为对功能没啥影响,就没有再深入了解该问题,如果有高人解决或是了解该问题,望请告知。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值