監聽關閉瀏覽器事件 js 監聽瀏覽器刷新仍是關閉事件
主要是監聽了window的onbeforeunload事件，對通常的瀏覽器來講若是在這個事件監聽時返回一個字符串，它就會彈出一個對話框，但有的瀏覽器是使用event.returnValue，你可使用如下的兼容性代碼javascript
window.onbeforeunload = function (e) { var message = 'some word'; e = e || window.event; if (e) { e.returnValue = message; } return message; };
js 監聽瀏覽器刷新仍是關閉事件
原做者的文章地址:http://udn.yyuap.com/forum.php?mod=viewthread&tid=96309php
頁面加載時只執行onload
頁面關閉時只執行onunload
頁面刷新時先執行onbeforeunload，而後onunload，最後onload。
通過驗證我得出的結論是：
//對於ie，谷歌，360：
//頁面加載時只執行onload
//頁面刷新時，刷新以前執行onbeforeunload事件，在新頁面即將替換舊頁面時onunload事件，最後onload事件。
//頁面關閉時，先onbeforeunload事件，再onunload事件。html
//對於火狐：java
//頁面刷新時，只執行onunload;頁面關閉時，只執行onbeforeunload事件
那麼迴歸正題，到底怎樣判斷瀏覽器是關閉仍是刷新?我按照網上的各類說法實驗千百遍，都未成功，其中各類說法以下：json
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
window.onbeforeunload =
function
()
//author: meizz
{
var
n = window.event.screenX - window.screenLeft;
var
b = n > document.documentElement.scrollWidth-20;
if
(b && window.event.clientY < 0 || window.event.altKey)
{
alert(
"是關閉而非刷新"
);
window.event.returnValue =
""
;
//這裏能夠放置你想作的操做代碼
}
else
{
alert(
"是刷新而非關閉"
);
}
}
window.onbeforeunload =
function
()
//author: meizz
{
var
n = window.event.screenX - window.screenLeft;
var
b = n > document.documentElement.scrollWidth-20;
if
(b && window.event.clientY < 0 || window.event.altKey)
{
alert(
"是關閉而非刷新"
);
window.event.returnValue =
""
;
//這裏能夠放置你想作的操做代碼
}
else
{
alert(
"是刷新而非關閉"
);
}
}
|
和瀏覽器
|
1
2
3
4
5
6
7
8
9
10
11
|
function
CloseOpen(event) {
if
(event.clientX<=0 && event.clientY<0) {
alert(
"關閉"
);
}
else
{
alert(
"刷新或離開"
);
}
}
</script>
<body onunload=
"CloseOpen(event)"
>
|
這些方法都無論用，可是我並無放棄，想啊想啊........
按照上面我得出結論，
//對於ie，谷歌，360：
//頁面加載時只執行onload
//頁面刷新時，刷新以前執行onbeforeunload事件，在新頁面即將替換舊頁面時onunload事件，最後onload事件。
//頁面關閉時，先onbeforeunload事件，再onunload事件。
//對於火狐：
//頁面刷新時，只執行onunload;頁面關閉時，只執行onbeforeunload事件
刷新的時候先onbeforeunload，而後取服務端請求數據，在新頁面即將替換舊頁面時onunload事件，而頁面關閉時，先onbeforeunload事件，再當即onunload事件。那麼在刷新的時候，onbeforeunload與onunload之間的時間確定比關閉的時候時間長，通過測試確實如此。服務器
貼出個人測試代碼：post
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var
_beforeUnload_time = 0, _gap_time = 0;
var
is_fireFox = navigator.userAgent.indexOf(
"Firefox"
)>-1;
//是不是火狐瀏覽器
window.onunload =
function
(){
_gap_time =
new
Date().getTime() - _beforeUnload_time;
if
(_gap_time <= 5)
$.post(pathName+
"/back/bi!aaaa.s2?t="
+_beforeUnload_time,{msg:
"瀏覽器關閉"
,time:_gap_time},
function
(json){},
"text"
);
else
$.post(pathName+
"/back/bi!aaaa.s2?t="
+_beforeUnload_time,{msg:
"瀏覽器刷新"
,time:_gap_time},
function
(json){},
"text"
);
}
window.onbeforeunload =
function
(){
_beforeUnload_time =
new
Date().getTime();
if
(is_fireFox)
//火狐關閉執行
$.post(pathName+
"/back/bi!aaaa.s2?t="
+_beforeUnload_time,{msg:
"火狐關閉"
},
function
(json){},
"text"
);
};
|
服務端代碼（SSH實現）：測試
- public void aaaa(){
- System.out.println(base.getParameter("msg")+"，間隔："+base.getParameter("time"));
- }
對於if(_gap_time <= 5)，此處的5是我預設的，按照客戶端瀏覽器而定，也與客戶端的機器配置有關係，個人機器關閉瀏覽器時onbeforeunload事件與onunload事件的數據間隔不超過2ms，而刷新時的間隔100%大於2ms，由於要訪問服務器。下面貼出個人測試結果：ui
下面給你們介紹瀏覽器關閉監聽事件，判斷刷新仍是關閉
使用onunload或onbeforeunload能夠監聽瀏覽器關閉事件，可是沒法區分關閉與刷新。如下js代碼能夠部分監聽關閉瀏覽器的事件！
|
1
2
3
4
5
6
7
8
9
10
|
//鼠標相對於用戶屏幕的水平位置 - 窗口左上角相對於屏幕左上角的水平位置 = 鼠標在當前窗口上的水平位置
var
n = window.event.screenX - window.screenLeft;
//鼠標在當前窗口內時，n<m，b爲false；鼠標在當前窗口外時，n>m，b爲true。20這個值是指關閉按鈕的寬度
var
b = n > document.documentElement.scrollWidth-20;
//鼠標在客戶區內時，window.event.clientY>0；鼠標在客戶區外時，window.event.clientY<0
if
(b && window.event.clientY < 0 || window.event.altKey || window.event.ctrlKey){
關閉瀏覽器時你想作的事
}
else
if
(event.clientY > document.body.clientHeight || event.altKey){
關閉瀏覽器時你想作的事
}
|