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

joywek 发布于2019-08-01 18:38 / 2828人阅读

摘要：项目上线后，客户反应当页面跳转到级或级页面，点击浏览器后退键时，页面返回上级页面后提示缺少参数，页面的数据也是空白的，为了解决这一问题，我的解决方案是禁用浏览器后退键，下面是解决方法在方法中，用监听地址变化。

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

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

GPU云服务器云服务器后退键 js屏蔽后退键单页面网站源码页面后退

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51883.html

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

摘要：项目上线后，客户反应当页面跳转到级或级页面，点击浏览器后退键时，页面返回上级页面后提示缺少参数，页面的数据也是空白的，为了解决这一问题，我的解决方案是禁用浏览器后退键，下面是解决方法在方法中，用监听地址变化。该文章适用于angularjs创建的单页面应用SPA，如vuejs或react.js不在本文讨论范围内。我用angularjs和sb-admin2实现了前端框架，在不考虑浏览器...

Scholer 2019-08-26 17:15 评论0 收藏0
多页面网站禁用浏览器后退键

摘要：如标题所说，本文提供的方法适用于多页面网站，如单页面应用等不适用。利用和控制浏览器后退键失效，下面说一下如何实现。当你在页面上写了浏览器会在中添加，同时页面并不跳转，但你只加了一次，所以只对一次后退事件起作用。如标题所说，本文提供的方法适用于多页面网站，如SPA单页面应用等不适用。利用window.onpopstate和window.history.pushState 控制浏览器后...

Kerr1Gan 2019-08-26 11:48 评论0 收藏0
多页面网站禁用浏览器后退键

摘要：如标题所说，本文提供的方法适用于多页面网站，如单页面应用等不适用。利用和控制浏览器后退键失效，下面说一下如何实现。当你在页面上写了浏览器会在中添加，同时页面并不跳转，但你只加了一次，所以只对一次后退事件起作用。如标题所说，本文提供的方法适用于多页面网站，如SPA单页面应用等不适用。利用window.onpopstate和window.history.pushState 控制浏览器后...

BLUE 2019-08-01 18:36 评论0 收藏0