1. 程式人生 > >獲取頁面離開onbeforeunload與onunload事件的返回值

獲取頁面離開onbeforeunload與onunload事件的返回值

在各種專案開發的過程中,頁面離開事件onbeforeunload是我們經常要用到的,可以避免使用者操作失誤,給使用者一個選擇的機會,就比如我們常常用到的編輯器中。如果使用者選擇了離開,那麼onunload或者onbeforeunload事件自然會觸發;但若使用者選擇了取消,又該如何檢測呢?

我們假定一個頁面離開取消事件,叫做onunloadcancel。顯然,這個事件應觸發在使用者按下對話方塊的取消按鈕之後。但關閉提示對話方塊的觸發流程並不是那麼簡單。我們先來回顧下這個過程:

window.onbeforeunload = function(){
    return "真的離開?";
}

當用戶準備離開頁面(比如按下關閉按鈕,或者重新整理頁面等等),onbeforeunload事件觸發。我們的指令碼無法在這個事件裡決定是否阻止頁面的關閉,唯一能做到的只有返回一個字串,這個字串僅作為說明文字出現在關閉選擇對話方塊裡,使用者可以選擇關閉,或者不關閉。但究竟選擇哪個,我們無從得知。

然而仔細分析下這個問題,其實不然。 如果使用者真選擇了關閉頁面,那麼之後所有的執行程式碼都byebye了;而繼續留在頁面的話,就當什麼都沒發生過,除了onbeforeunload事件。所以,我們在onbeforeunload事件裡做點小花招,在此註冊個幾毫秒之後啟動的定時器,如果頁面真關閉了,那麼這個定時器當然是作廢了;那麼頁面還在,幾毫秒的延時對於這個本來就是非同步的介面互動事件也沒有什麼誤差。

window.onbeforeunload = function(){
    setTimeout(onunloadcancel, 10);
    return "真的離開?";
}
window.onunloadcancel = function(){
    alert("取消離開");
}

我們使用setTimeout,延時10ms執行onunloadcancel。如果頁面真關閉了,定時器當然都銷燬;反之繼續。但在測試中,發現FireFox有個兩個BUG:
1) 有時按下關閉按鈕,也會執行onunloadcancel,並且有個對話方塊一閃而過。如果換成while(1);瀏覽器會一直卡死,這說明onunloadcancel確實是執行了,只是銷燬了介面,但並沒有暫停指令碼的執行。
2) 如果是通過重新整理頁面的方式離開,僅執行一次onbeforeunload,但點選X按鈕關閉頁面,會執行兩次onbeforeunload。因此我們還需在完善下,以便相容FF。

var _t;
window.onbeforeunload = function(){
    setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);
    return "真的離開?";
}
window.onunloadcancel = function(){
    clearTimeout(_t);
    alert("取消離開");
}

這裡使用了一種我也說不出原因的辦法,應該算是hack,解決了FF下的bug。