捕獲瀏覽器關(guān)閉、刷新事件不同情況下的處理方法
更新時(shí)間：2013年06月02日 17:14:16 作者：
在做一些關(guān)于會(huì)員在線的問題時(shí)，往往我們要根據(jù)覽器是否關(guān)閉來判斷用戶是否下線，然后再從session和application中將此用戶移除，下面與大家分享下具體的捕捉方法
在做一些關(guān)于會(huì)員在線的問題時(shí)，往往我們要根據(jù)覽器是否關(guān)閉來判斷用戶是否下線，然后再從session和application中將此用戶移除。
由于瀏覽器是無狀態(tài)的，在這時(shí)候捕捉瀏覽器關(guān)閉會(huì)出現(xiàn)兩種情況：
1.真正的關(guān)閉瀏覽器 (a.點(diǎn)擊關(guān)閉按鈕 b.右擊任務(wù)欄關(guān)閉 c.按alt+F4關(guān)閉)
2.刷新瀏覽器。
那如何判斷區(qū)分這兩種動(dòng)作呢?
一. Javascript代碼處理方法：
function window.onbeforeunload()
{
//用戶點(diǎn)擊瀏覽器右上角關(guān)閉按鈕或是按alt+F4關(guān)閉
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
// alert("點(diǎn)關(guān)閉按鈕");
document.getElementById("hiddenForm:hiddenBtn").click();
// window.event.returnValue="確定要退出本頁嗎?";
}
//用戶點(diǎn)擊任務(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 鼠標(biāo)光標(biāo)X坐標(biāo)
document.body.clientWidth 窗體工作區(qū)寬度
event.clientY 鼠標(biāo)光標(biāo)Y坐標(biāo)
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 "是否離開當(dāng)前頁面?";
}
}
function UnLoadEvent()
{
DispClose = false;
//在這里處理關(guān)閉頁面前的動(dòng)作
}
</script>
在頁面卸載之前引發(fā)onbeforeunload事件，如果用戶選擇“是”即確定卸載頁面將引發(fā)onunload事件，否則返回頁面不做任何操作。
由于瀏覽器是無狀態(tài)的，在這時(shí)候捕捉瀏覽器關(guān)閉會(huì)出現(xiàn)兩種情況：
1.真正的關(guān)閉瀏覽器 (a.點(diǎn)擊關(guān)閉按鈕 b.右擊任務(wù)欄關(guān)閉 c.按alt+F4關(guān)閉)
2.刷新瀏覽器。
那如何判斷區(qū)分這兩種動(dòng)作呢?
一. Javascript代碼處理方法：
復(fù)制代碼 代碼如下:
function window.onbeforeunload()
{
//用戶點(diǎn)擊瀏覽器右上角關(guān)閉按鈕或是按alt+F4關(guān)閉
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
// alert("點(diǎn)關(guān)閉按鈕");
document.getElementById("hiddenForm:hiddenBtn").click();
// window.event.returnValue="確定要退出本頁嗎?";
}
//用戶點(diǎn)擊任務(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 鼠標(biāo)光標(biāo)X坐標(biāo)
document.body.clientWidth 窗體工作區(qū)寬度
event.clientY 鼠標(biāo)光標(biāo)Y坐標(biāo)
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 "是否離開當(dāng)前頁面?";
}
}
function UnLoadEvent()
{
DispClose = false;
//在這里處理關(guān)閉頁面前的動(dòng)作
}
</script>
在頁面卸載之前引發(fā)onbeforeunload事件，如果用戶選擇“是”即確定卸載頁面將引發(fā)onunload事件，否則返回頁面不做任何操作。
您可能感興趣的文章:
- 基于Jquery 解決Ajax請(qǐng)求的頁面 瀏覽器后退前進(jìn)功能，頁面刷新功能實(shí)效問題
- JavaScript不刷新實(shí)現(xiàn)瀏覽器的前進(jìn)后退功能
- js監(jiān)控IE火狐瀏覽器關(guān)閉、刷新、回退、前進(jìn)事件
- Js智能判斷瀏覽器是關(guān)閉還是刷新的代碼
- 基于JavaScript判斷瀏覽器到底是關(guān)閉還是刷新(超準(zhǔn)確)
- 驗(yàn)證碼在IE中不刷新而谷歌等瀏覽器正常的解決方案
- 解決微信瀏覽器Javascript無法使用window.location.reload()刷新頁面
- JS區(qū)分瀏覽器頁面是刷新還是關(guān)閉
- javaweb用戶注銷后點(diǎn)擊瀏覽器返回刷新頁面重復(fù)登錄問題的解決方法
- 深入理解瀏覽器的各種刷新規(guī)則
相關(guān)文章
JS實(shí)現(xiàn)的計(jì)數(shù)排序與基數(shù)排序算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的計(jì)數(shù)排序與基數(shù)排序算法,結(jié)合實(shí)例形式簡單分析了計(jì)數(shù)排序與基數(shù)排序的原理與JS實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12
本文給大家分享的是個(gè)人對(duì)于12306的新的驗(yàn)證碼系統(tǒng)的破解思路，僅僅是思路，還沒進(jìn)行實(shí)地驗(yàn)證，推薦給大家，拋磚引玉吧。2015-03-03
JS實(shí)現(xiàn)的頁面自定義滾動(dòng)條效果
這篇文章主要介紹了JS實(shí)現(xiàn)的頁面自定義滾動(dòng)條效果,涉及JavaScript結(jié)合css設(shè)置頁面滾動(dòng)條樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JS簡單獲取當(dāng)前年月日星期的方法,結(jié)合完整實(shí)例形式分析了javascript基于自定義函數(shù)獲取當(dāng)前日期時(shí)間的方法,涉及javascript中Date()類的使用與日期相關(guān)運(yùn)算技巧,需要的朋友可以參考下2017-02-02
原生js和jquery中有關(guān)透明度設(shè)置的相關(guān)問題
設(shè)置透明度問題，比如圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設(shè)置透明度的相關(guān)問題和注意點(diǎn)2014-01-01
解決bootstrap下拉菜單點(diǎn)擊立即隱藏bug的方法
本篇文章主要介紹了解決bootstrap下拉菜單點(diǎn)擊立即隱藏bug的方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
這篇文章主要介紹了微信小程序的引導(dǎo)頁實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
js實(shí)現(xiàn)a標(biāo)簽超鏈接提交form表單的方法
這篇文章主要介紹了js實(shí)現(xiàn)a標(biāo)簽超鏈接提交form表單的方法,涉及javascript針對(duì)表單操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
ajax請(qǐng)求get與post的區(qū)別總結(jié)
本篇文章是對(duì)ajax請(qǐng)求get與post的區(qū)別進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
今天小編就為大家分享一篇layui的table中顯示圖片方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08