实现关闭浏览器标签页退出登录

最新推荐文章于 2023-09-13 17:28:47 发布

懵懂无知、小菜鸟

最新推荐文章于 2023-09-13 17:28:47 发布

阅读量5.6k

点赞数 4

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_39370907/article/details/103260436

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

公司的一个项目突然要加一个在关闭浏览器标签页退出登录的功能，当时首先想到的就是获取浏览器标签页的关闭事件然后执行退出登录方法，浏览器标签页的关闭事件有onbeforeunload和onunload：

onunload、onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。
区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。

//过多的就不介绍了，想具体了解的可以网上搜索。

通过上面介绍可以发现这两种事件都是刷新或关闭时调用的，无法区分是在刷新还是在关闭

在网上一通搜索找到了一种解决方法，但是只适用于Chrome浏览器(文章末尾已贴出代码)，我们项目是必须适配IE浏览器的......找了很多方法，但是在IE浏览器中都无法使用，感觉通过事件来触发这条路暂时有点走不通，那就发散思维想想其它方法来实现，既然点击事件暂时无法实现，那可不可以通过在浏览器存储数据来判断是否退出登录了呢？然后就想到了sessionStorage

sessionStorage是Html5的特性,IE7以下浏览器不支持 
sessionStorage生命周期为当前窗口或标签页
一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了

看完介绍很符合功能需求啊，其它浏览器也都支持，而且IE8以上浏览器也支持，完美

已经找到解决方法了，直接开干：

1、首先在登录成功后存储一个数据
sessionStorage.setItem("browser_logout","ok");

2、在程序页面中判断browser_logout是否存在
<script type="text/javascript">
    if(sessionStorage.getItem("browser_logout") != "ok"){
        //退出登录
        $.get("/logout", function(){});
    }
</script>

3、点击退出登录时清除存储的数据
<script type="text/javascript">
   function logout() {
      //退出登录后将browser_logout移除
      sessionStorage.removeItem("browser_logout");
      //退出登录
      $.get("/logout", function(){});
   }
</script>

想必看完代码也应该发现其中存在着缺陷，退出登录是在用户关闭标签页后，重新访问程序页面时才触发退出登录，而不是在点击关闭页面时就触发的，但是在感官上关闭标签页后再次访问是退出登录状态的

暂时只能想到这种解决方法，如果你有好的解决方法请分享一下，谢谢！

贴一下适用于Chrome浏览器的代码：

var _beforeUnload_time = 0, _gap_time = 0;

window.onunload = function (){
    _gap_time = new Date().getTime() - _beforeUnload_time;
    if(_gap_time <= 5) {//浏览器关闭
        clearCookie();
    }else{//浏览器刷新-chrome刷新
        console.log(document.domain);
        return confirm("确定要离开本系统么？");
    }
};

window.onbeforeunload = function (){
    _beforeUnload_time = new Date().getTime();
};

function clearCookie() {
    //退出登录
    $.get("/logout", function(){});
}

懵懂无知、小菜鸟

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
实现关闭浏览器标签页退出登录

公司的一个项目突然要加一个在关闭浏览器标签页退出登录的功能，当时首先想到的就是获取浏览器标签页的关闭事件然后执行退出登录方法，浏览器标签页的关闭事件有onbeforeunload和onunload：onunload、onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定...
复制链接

扫一扫