監聽瀏覽器關閉按鈕點擊事件 -- 使用JS

Onunload與Onbeforeunload

Onunload，onbeforeunload都是在刷新或關閉時調用，能夠在<script>腳本中經過window.onunload來指定或者在<body>裏指定。區別在於onbeforeunload在onunload以前執行，它還能夠阻止onunload的執行（測試了下，發現onbeforeunload因爲會阻止onunload的執行，則也會window.close()的執行，也說明了window.close()是在onunload以後執行的）。

Onbeforeunload也是在頁面刷新或關閉時調用，Onbeforeunload是正要去服務器讀取新的頁面時調用，此時還沒開始讀取；而onunload則已經從服務器上讀到了須要加載的新的頁面，在即將替換掉當前頁面時調用。Onunload是沒法阻止頁面的更新和關閉的。而 Onbeforeunload 能夠作到。曾經作一個考試系統，涉及到防止用戶半途退出考試（有意或者無心），代碼以下：

Java代碼

<script type="text/javascript">
<!--
window.onbeforeunload = onbeforeunload_handler;
window.onunload = onunload_handler;
function onbeforeunload_handler(){
var warning="確認退出?";
return warning;
}
function onunload_handler(){
var warning="謝謝光臨";
alert(warning);
}
// -->
</script>

這段代碼在FF和IE上都能正確執行.再點擊關閉按鈕時首先觸發obbeforeunload事件,點擊否認時不執行onload事件.

一般應用在 註銷session等等登錄信息 等方面....

這裏一併推薦一個教程 ActionScript3 裏面寫道：

運用onunload事件判斷瀏覽器是刷新仍是關閉窗口

function CloseOpen(event) {
if(event.clientX<=0 && event.clientY<0) {
alert("關閉");
}
else
{
alert("刷新或離開");
}
}

Java代碼

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 = ""; //這裏能夠放置你想作的操做代碼
}
}

------------------------------------------------------------------------------------------javascript

另外一篇的轉載：java

最近寫東西的時候發現須要對瀏覽器的關閉進行監聽,當用戶關閉的時候須要調用session.invalid();清空session信息,可是仔細一查手冊發現不管是body仍是window都沒有onclose事件,以後onload,onunload,beforeunload三個事件瀏覽器

然而三個時間不管是哪一個都沒法單獨解決單獨監聽瀏覽器關閉的事件,由於在瀏覽器正常運行時先加載的是beforeunload->onunload->onload 可是麻煩的是若是刷新頁面時是執行beforeunload->onunload,若是關閉瀏覽器的話是執行onunload（實際上關閉瀏覽器beforeunload也執行的）.若是單單監聽onunload的話是沒法區別用戶是刷新仍是關閉窗口的.因此就要用beforeunload來監測了服務器

window.onbeforeunload=onclose;session

function onclose()
{
    if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
    {
           removeSession();//這裏添加具體的處理方案
    }
}測試

通過測試,IE7瀏覽器能夠監測監聽到 alt+f4 或者單擊右上角小叉子退出,可是對於多選項卡瀏覽的用戶貌似沒法監聽到這點比較惋惜~ spa