在做Web開發(fā)時,我們經(jīng)常用到頁面關(guān)閉事件onbeforeunload,可以給用戶一個選擇放棄關(guān)閉的機會,就比如這個博客編輯器。如果用戶選擇了離開,那么onunload事件自然會觸發(fā);但若用戶選擇了取消,又該如何檢測呢?
我們假定一個頁面離開取消事件,叫做onunloadcancel。顯然,這個事件應(yīng)觸發(fā)在用戶按下對話框的取消按鈕之后。但關(guān)閉提示對話框的觸發(fā)流程并不是那么簡單。我們先來回顧下這個過程:
當(dāng)用戶準(zhǔn)備離開頁面(比如按下關(guān)閉按鈕,或者刷新頁面等等),onbeforeunload事件觸發(fā)。我們的腳本無法在這個事件里決定是否阻止頁面的關(guān)閉,唯一能做到的只有返回一個字符串,這個字符串僅作為說明文字出現(xiàn)在關(guān)閉選擇對話框里,用戶可以選擇關(guān)閉,或者不關(guān)閉。但究竟選擇哪個,我們無從得知。
然而仔細(xì)分析下這個問題,其實不然。 如果用戶真選擇了關(guān)閉頁面,那么之后所有的運行代碼都byebye了;而繼續(xù)留在頁面的話,就當(dāng)什么都沒發(fā)生過,除了onbeforeunload事件。所以,我們在onbeforeunload事件里做點小花招,在此注冊個幾毫秒之后啟動的定時器,如果頁面真關(guān)閉了,那么這個定時器當(dāng)然是作廢了;那么頁面還在,幾毫秒的延時對于這個本來就是異步的界面交互事件也沒有什么誤差。
有時按下關(guān)閉按鈕,也會執(zhí)行onunloadcancel,并且有個對話框一閃而過。如果換成while(1);瀏覽器會一直卡死,這說明onunloadcancel確實是執(zhí)行了,只是銷毀了界面,但并沒有暫停腳本的運行。
如果是通過刷新頁面的方式離開,僅執(zhí)行一次onbeforeunload,但點擊X按鈕關(guān)閉頁面,會執(zhí)行兩次onbeforeunload。因此我們還需在完善下,以便兼容FF。
新聞熱點
疑難解答