摘要:项目上线后,客户反应当页面跳转到级或级页面,点击浏览器后退键时,页面返回上级页面后提示缺少参数,页面的数据也是空白的,为了解决这一问题,我的解决方案是禁用浏览器后退键,下面是解决方法在方法中,用监听地址变化。
该文章适用于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又变回正常。
因为对功能没啥影响,就没有再深入了解该问题,如果有高人解决或是了解该问题,望请告知。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/110131.html
摘要:项目上线后,客户反应当页面跳转到级或级页面,点击浏览器后退键时,页面返回上级页面后提示缺少参数,页面的数据也是空白的,为了解决这一问题,我的解决方案是禁用浏览器后退键,下面是解决方法在方法中,用监听地址变化。 该文章适用于angularjs创建的单页面应用SPA,如vuejs或react.js不在本文讨论范围内。 我用angularjs和sb-admin2实现了前端框架,在不考虑浏览器...
摘要:如标题所说,本文提供的方法适用于多页面网站,如单页面应用等不适用。利用和控制浏览器后退键失效,下面说一下如何实现。当你在页面上写了浏览器会在中添加,同时页面并不跳转,但你只加了一次,所以只对一次后退事件起作用。 如标题所说,本文提供的方法适用于多页面网站,如SPA单页面应用等不适用。 利用window.onpopstate和window.history.pushState 控制浏览器后...
摘要:如标题所说,本文提供的方法适用于多页面网站,如单页面应用等不适用。利用和控制浏览器后退键失效,下面说一下如何实现。当你在页面上写了浏览器会在中添加,同时页面并不跳转,但你只加了一次,所以只对一次后退事件起作用。 如标题所说,本文提供的方法适用于多页面网站,如SPA单页面应用等不适用。 利用window.onpopstate和window.history.pushState 控制浏览器后...
阅读 3504·2021-09-27 14:02
阅读 1675·2019-08-30 15:56
阅读 1704·2019-08-29 18:44
阅读 3207·2019-08-29 17:21
阅读 440·2019-08-26 17:15
阅读 1142·2019-08-26 13:57
阅读 1202·2019-08-26 13:56
阅读 2811·2019-08-26 11:30