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

2024年1月11日 182次阅读 来源: hellowoody

该文章适用于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又变回一般。

由于对功用没啥影响，就没有再深切相识该题目，如果有高人处理或是相识该题目，望请示知。

    原文作者：hellowoody
    原文地址: https://segmentfault.com/a/1190000013356585
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞