分享JavaScript獲取網頁關閉與取消關閉的事件

 這篇文章主要介紹了JavaScript獲取網頁關閉與取消關閉的事件，有需要的朋友可以參考一下

在做Web開發時，我們經常用到頁面關閉事件onbeforeunload，可以給用戶一個選擇放棄關閉的機會，就比如這個博客編輯器。如果用戶選擇了離開，那麼onunload事件自然會觸發；但若用戶選擇了取消，又該如何檢測呢？   我們假定一個頁面離開取消事件，叫做onunloadcancel。顯然，這個事件應觸發在用戶按下對話框的取消按鈕之後。但關閉提示對話框的觸發流程並不是那麼簡單。我們先來回顧下這個過程：    代碼如下: window.onbeforeunload = function() {     return "真的離開?"; }       當用戶准備離開頁面（比如按下關閉按鈕，或者刷新頁面等等），onbeforeunload事件觸發。我們的腳本無法在這個事件裡決定是否阻止頁面的關閉，唯一能做到的只有返回一個字符串，這個字符串僅作為說明文字出現在關閉選擇對話框裡，用戶可以選擇關閉，或者不關閉。但究竟選擇哪個，我們無從得知。   然而仔細分析下這個問題，其實不然。 如果用戶真選擇了關閉頁面，那麼之後所有的運行代碼都byebye了；而繼續留在頁面的話，就當什麼都沒發生過，除了onbeforeunload事件。所以，我們在onbeforeunload事件裡做點小花招，在此注冊個幾毫秒之後啟動的定時器，如果頁面真關閉了，那麼這個定時器當然是作廢了；那麼頁面還在，幾毫秒的延時對於這個本來就是異步的界面交互事件也沒有什麼誤差。    代碼如下: <script language="JavaScript"> window.onbeforeunload = function() {     setTimeout(onunloadcancel, 10);     return "真的離開?"; } window.onunloadcancel = function() {     alert("取消離開"); } </script>   我們使用setTimeout，延時10ms執行onunloadcancel。如果頁面真關閉了，定時器當然都銷毀；反之繼續。但在測試中，發現FireFox有個兩個BUG：   有時按下關閉按鈕，也會執行onunloadcancel，並且有個對話框一閃而過。如果換成while(1);浏覽器會一直卡死，這說明onunloadcancel確實是執行了，只是銷毀了界面，但並沒有暫停腳本的運行。 如果是通過刷新頁面的方式離開，僅執行一次onbeforeunload，但點擊X按鈕關閉頁面，會執行兩次onbeforeunload。因此我們還需在完善下，以便兼容FF。    代碼如下: <script language="JavaScript"> var _t; window.onbeforeunload = function() {     setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);     return "真的離開?"; } window.onunloadcancel = function() {     clearTimeout(_t);     alert("取消離開"); } </script>     這裡使用了一種我也說不出原因的辦法，應該算是hack，解決了FF下的bug。