分享JavaScript取得網頁關閉與取消關閉的事件_javascript技巧

在做Web開發時，我們常用到頁面關閉事件onbeforeunload，可以給使用者一個選擇放棄關閉的機會，就例如這個部落格編輯器。如果使用者選擇了離開，那麼onunload事件自然會觸發；但若使用者選擇了取消，又該如何偵測呢？

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

複製程式碼 程式碼如下:

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

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

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

複製程式碼 程式碼如下:

我們使用setTimeout，延遲10ms執行onunloadcancel。如果頁面真關閉了，定時器當然都銷毀；反之繼續。但在測試中，發現FireFox有兩個BUG：

有時按下關閉按鈕，也會執行onunloadcancel，有個對話框一閃而過。如果換成while(1);瀏覽器會一直卡死，這說明onunloadcancel確實是執行了，只是銷毀了介面，但並沒有暫停腳本的運行。
如果是透過重新整理頁面的方式離開，只執行一次onbeforeunload，但點選X按鈕關閉頁面，會執行兩次onbeforeunload。因此我們還需在完善下，以便相容於FF。

複製程式碼 程式碼如下:

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