頁面關閉或返回觸發JS事件,重新整理不觸發
頁面載入時只執行onload
頁面關閉時只執行onunload
頁面重新整理時先執行onbeforeunload,然後onunload,最後onload。
經過驗證我得出的結論是:
## 對於ie,谷歌,360:
- 頁面載入時只執行onload
- 頁面重新整理時,重新整理之前執行onbeforeunload事件,在新頁面即將替換舊頁面時onunload事件,最後onload事件。
- 頁面關閉時,先onbeforeunload事件,再onunload事件。
## 對於火狐:
-頁面重新整理時,只執行onunload;頁面關閉時,只執行onbeforeunload事件
那麼迴歸正題,到底怎樣判斷瀏覽器是關閉還是重新整理?我按照網上的各種說法實驗千百遍,都未成功,其中各種說法如下:
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("是重新整理而非關閉"); } }
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之間的時間肯定比關閉的時候時間長,經過測試確實如此。
使用onunload或onbeforeunload可以監聽瀏覽器關閉事件,但是無法區分關閉與重新整理。以下js程式碼可以部分監聽關閉瀏覽器的事件!
//滑鼠相對於使用者螢幕的水平位置 - 視窗左上角相對於螢幕左上角的水平位置 = 滑鼠在當前視窗上的水平位置
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){
關閉瀏覽器時你想做的事
}