zoukankan      html  css  js  c++  java
  • 系统通过浏览器后退到登录页面,然后禁止通过前进登录的实现

    首先,此功能是美好丰满的,但是做的时候才发现是那么的骨感。或许是本人技术太菜,或许是网上大牛不愿分享,各种百度谷歌也没有找到解决实例。

    那就先想想思路吧:

    1、  监控浏览器后退按钮事件,触发时删除cookies,设置location.href到登录页面

    2、  监控系统登录后首页的unload事件,触发时做相应处理

    事实证明以上2种我都无法实现,第一种浏览器后退按钮事件我无法监控到,估计装控件可以,但是不实用也没必要。第二种方法在系统首页跳转的时候都会触发,无法确定什么情况下是后退触发的。

    发下牢骚:淘宝、163邮箱、人人都没有这效果,为嘛我要做这么苦逼的功能……

    牢骚归牢骚,工作还是要做的,好吧,一切归零。还是查资料吧,各种搜索,试用各种漫天转载禁用页面缓存的方法失败,期间还整过history.go(0)、history.forward(-1)这种,均没有搞定。哎……

    无意中查到了location.hash,虽然当时按别人的方法没有实现,最后看了别人封装的hashChange方法的实例,让我重燃对他的希望。

    hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。这是w3school上的定义,简单点就是链接地址#开始的字符穿,类似于页面上的锚点。

    重新整理思路:login页面登录提交时设置location.hash的值,在login页面load时判断location.hash值是否有为空,为空则为首次载入的;不为空说明是从系统后退出来的,那么清楚系统cookies,重新加载login页面。

    Ok,开始实施:

    a.初版//ie测试通过,chrome、FF失败

    View Code
     1 $(function () {
     2     if (window.location.hash != null && window.location.hash == "#login") {
     3         $.post("ashx/DeleteCookies.ashx", function (data) {
     4             if (data != -1) {
     5                 $("#txtUserName").val(data); //绑定用户名
     6                 window.location.hash = "";
     7             }
     8         });
     9     }
    10     $("#btnsubmit").click(function () {
    11         if (!checkValidate())
    12             return false;
    13         window.location.hash = "#login";
    14     });
    15 });

    经调试chrome下ajax执行有问题,FF下直接读的缓存
    b.修改//ie、chrome测试通过,FF失败

    View Code
     1 $.ajax({
     2     url: "ashx/DeleteCookies.ashx",
     3     type: "post",
     4     async: false,//修改为同步
     5     success: function (data) {
     6         if (data != -1) {            
     7             location.href = "Login.aspx?user=" + data;
     8         }
     9     }
    10 });

     经测试FF下仍然有问题,还是直接读缓存
    c.终版//ie、chrome、FF均通过

    View Code
     1 $(function () {
     2     if (window.location.hash != null && window.location.hash.length >0) {
     3         RefreshPage();        
     4     }
     5     //读取用户名绑定省略
     6     $("#btnsubmit").click(function () {
     7         if (!checkValidate())
     8             return false;     
     9         window.location.search = "?user=" + $("#txtUserName").val();//ff下读缓存问题
    10         window.location.hash = "#" + $("#txtUserName").val();
    11     });
    12 });
    13 
    14 function RefreshPage() {
    15     var name = window.location.hash.replace(/^#/, "");
    16     window.location.hash = "";
    17     var strurl = "Login.aspx?user=" + name;
    18     $.ajax({
    19         url: "ashx/DeleteCookies.ashx",
    20         type: "post",
    21         async: false,
    22         success: function (data) {
    23             if (data != -1) {                
    24                 strurl = "Login.aspx?user=" + data;
    25             }
    26         }
    27     });
    28     location.href = strurl;
    29 }

    经测试FF下已通过,加的代码window.location.search = "?user=" + $("#txtUserName").val()的作用是修改页面地址,避免加载缓存
    经过以上努力终于通过了测试人员测试,真是不容易。事实证明简单的copy&paste的确不能解决问题,感谢自己,感谢各大搜索,废话说多了。

    完整js文件:https://files.cnblogs.com/tobebetter/BackLoginOut.js

  • 相关阅读:
    golang单例模式
    PHP打开并修改文件
    关于文件服设计的一些想法
    Api
    golang Iterate through the fields of a struct in Go
    zookeeper note
    centos 6 install protoc
    todo
    linux route
    build http_load
  • 原文地址:https://www.cnblogs.com/tobebetter/p/2826542.html
Copyright © 2011-2022 走看看