捕獲瀏覽器關(guān)閉、刷新事件不同情況下的處理方法
更新時間:2013年06月02日 17:14:16 作者:
在做一些關(guān)于會員在線的問題時,往往我們要根據(jù)覽器是否關(guān)閉來判斷用戶是否下線,然后再從session和application中將此用戶移除,下面與大家分享下具體的捕捉方法
在做一些關(guān)于會員在線的問題時,往往我們要根據(jù)覽器是否關(guān)閉來判斷用戶是否下線,然后再從session和application中將此用戶移除。
由于瀏覽器是無狀態(tài)的,在這時候捕捉瀏覽器關(guān)閉會出現(xiàn)兩種情況:
1.真正的關(guān)閉瀏覽器 (a.點擊關(guān)閉按鈕 b.右擊任務(wù)欄關(guān)閉 c.按alt+F4關(guān)閉)
2.刷新瀏覽器。
那如何判斷區(qū)分這兩種動作呢?
一. Javascript代碼處理方法:
function window.onbeforeunload()
{
//用戶點擊瀏覽器右上角關(guān)閉按鈕或是按alt+F4關(guān)閉
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
// alert("點關(guān)閉按鈕");
document.getElementById("hiddenForm:hiddenBtn").click();
// window.event.returnValue="確定要退出本頁嗎?";
}
//用戶點擊任務(wù)欄,右鍵關(guān)閉。s或是按alt+F4關(guān)閉
else if(event.clientY > document.body.clientHeight || event.altKey)
{
// alert("任務(wù)欄右擊關(guān)閉");
document.getElementById("hiddenForm:hiddenBtn").click();
// window.event.returnValue="確定要退出本頁嗎?";
}
//其他情況為刷新
else
{
// alert("刷新頁面");
}
}
其中 event.clientX 鼠標光標X坐標
document.body.clientWidth 窗體工作區(qū)寬度
event.clientY 鼠標光標Y坐標
event.altKey 是否按下alt鍵
二. 事件捕捉方法:
<body scroll="no" onbeforeunload="return CloseEvent();" onunload="UnLoadEvent()" >
</body>
<script language="JavaScript" type="text/javascript">
var DispClose = true;
function CloseEvent()
{
if (DispClose)
{
return "是否離開當前頁面?";
}
}
function UnLoadEvent()
{
DispClose = false;
//在這里處理關(guān)閉頁面前的動作
}
</script>
在頁面卸載之前引發(fā)onbeforeunload事件,如果用戶選擇“是”即確定卸載頁面將引發(fā)onunload事件,否則返回頁面不做任何操作。
由于瀏覽器是無狀態(tài)的,在這時候捕捉瀏覽器關(guān)閉會出現(xiàn)兩種情況:
1.真正的關(guān)閉瀏覽器 (a.點擊關(guān)閉按鈕 b.右擊任務(wù)欄關(guān)閉 c.按alt+F4關(guān)閉)
2.刷新瀏覽器。
那如何判斷區(qū)分這兩種動作呢?
一. Javascript代碼處理方法:
復(fù)制代碼 代碼如下:
function window.onbeforeunload()
{
//用戶點擊瀏覽器右上角關(guān)閉按鈕或是按alt+F4關(guān)閉
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
// alert("點關(guān)閉按鈕");
document.getElementById("hiddenForm:hiddenBtn").click();
// window.event.returnValue="確定要退出本頁嗎?";
}
//用戶點擊任務(wù)欄,右鍵關(guān)閉。s或是按alt+F4關(guān)閉
else if(event.clientY > document.body.clientHeight || event.altKey)
{
// alert("任務(wù)欄右擊關(guān)閉");
document.getElementById("hiddenForm:hiddenBtn").click();
// window.event.returnValue="確定要退出本頁嗎?";
}
//其他情況為刷新
else
{
// alert("刷新頁面");
}
}
其中 event.clientX 鼠標光標X坐標
document.body.clientWidth 窗體工作區(qū)寬度
event.clientY 鼠標光標Y坐標
event.altKey 是否按下alt鍵
二. 事件捕捉方法:
復(fù)制代碼 代碼如下:
<body scroll="no" onbeforeunload="return CloseEvent();" onunload="UnLoadEvent()" >
</body>
<script language="JavaScript" type="text/javascript">
var DispClose = true;
function CloseEvent()
{
if (DispClose)
{
return "是否離開當前頁面?";
}
}
function UnLoadEvent()
{
DispClose = false;
//在這里處理關(guān)閉頁面前的動作
}
</script>
在頁面卸載之前引發(fā)onbeforeunload事件,如果用戶選擇“是”即確定卸載頁面將引發(fā)onunload事件,否則返回頁面不做任何操作。
您可能感興趣的文章:
- 基于Jquery 解決Ajax請求的頁面 瀏覽器后退前進功能,頁面刷新功能實效問題
- JavaScript不刷新實現(xiàn)瀏覽器的前進后退功能
- js監(jiān)控IE火狐瀏覽器關(guān)閉、刷新、回退、前進事件
- Js智能判斷瀏覽器是關(guān)閉還是刷新的代碼
- 基于JavaScript判斷瀏覽器到底是關(guān)閉還是刷新(超準確)
- 驗證碼在IE中不刷新而谷歌等瀏覽器正常的解決方案
- 解決微信瀏覽器Javascript無法使用window.location.reload()刷新頁面
- JS區(qū)分瀏覽器頁面是刷新還是關(guān)閉
- javaweb用戶注銷后點擊瀏覽器返回刷新頁面重復(fù)登錄問題的解決方法
- 深入理解瀏覽器的各種刷新規(guī)則
相關(guān)文章
ES6 javascript中class靜態(tài)方法、屬性與實例屬性用法示例
這篇文章主要介紹了ES6 javascript中class靜態(tài)方法、屬性與實例屬性用法,結(jié)合實例形式分析了ES6中類的靜態(tài)方法、靜態(tài)屬性概念、功能、使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-10-10詳解利用exif.js解決ios手機上傳豎拍照片旋轉(zhuǎn)90度問題
這篇文章主要介紹了詳解利用exif.js解決ios手機上傳豎拍照片旋轉(zhuǎn)90度問題,有需要的朋友可以了解一下。2016-11-11基于javascript實現(xiàn)的購物商城商品倒計時實例
本文主要介紹了基于javascript實現(xiàn)的購物商城商品倒計時實例,代碼詳細,可直接復(fù)制試試看效果。需要的朋友可以參考借鑒2016-12-12Javascript 檢測、添加、移除樣式(className)函數(shù)代碼
在前臺腳本中,我們經(jīng)常要操作頁面元素的樣式,比如標簽頁切換時,將當前標簽加上一個樣式,當切換到其他標簽時,再將樣式還原,本文介紹的是直接添加和移除 className 的方法。2009-09-09JavaScript使用function定義對象并調(diào)用的方法
這篇文章主要介紹了JavaScript使用function定義對象并調(diào)用的方法,實例分析了javascript中function定義及使用對象與方法的相關(guān)技巧,需要的朋友可以參考下2015-03-03