公司的一個項目突然要加一個在關閉瀏覽器標簽頁退出登錄的功能,當時首先想到的就是獲取瀏覽器標簽頁的關閉事件然后執行退出登錄方法,瀏覽器標簽頁的關閉事件有和:
onunload、onbeforeunload都是在刷新或關閉時調用,可以在<script>腳本中通過window.onunload來指定或者在里指定。
區別在于onbeforeunload在onunload之前執行,它還可以阻止onunload的執行。
//過多的就不介紹了,想具體了解的可以網上搜索。
通過上面介紹可以發現這兩種事件都是刷新或關閉時調用的,無法區分是在刷新還是在關閉
在網上一通搜索找到了一種解決方法,但是只適用于Chrome瀏覽器(文章末尾已貼出代碼),我們項目是必須適配IE瀏覽器的......找了很多方法,但是在IE瀏覽器中都無法使用,感覺通過事件來觸發這條路暫時有點走不通,那就發散思維想想其它方法來實現,既然點擊事件暫時無法實現,那可不可以通過在瀏覽器存儲數據來判斷是否退出登錄了呢?然后就想到了
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(){});
}
*請認真填寫需求信息,我們會在24小時內與您取得聯系。