在做畢設的時候,需要在關閉瀏覽器的時候向后台服務器修改用戶在線狀態。首先講一下 onbeforeunload 和 onunload(都是在刷新或關閉時調用) 的區別:
(1)onbeforeunload:在即將離開當前頁面(刷新或關閉)時觸發,即正要去服務器讀取新的頁面時調用,此時還沒開始讀取。該事件可用於彈出對話框,提示用戶是繼續瀏覽頁面還是離開當前頁面。兼容方面如下:
- IE、Safari 完美支持
- Firefox、Chrome 不支持文字提醒信息
- Opera 不支持
(2)onunload:在用戶退出頁面時發生,即已經從服務器上讀到了需要加載的新的頁面,在即將替換掉當前頁面時調用。該事件可用於當用戶離開頁面時發生的事件(通過點擊一個連接,提交表單,關閉瀏覽器窗口等等。)。兼容方面如下:
- IE瀏覽器 頁面跳轉、刷新頁面能執行,但關閉瀏覽器不能執行;
- firefox 頁面跳轉能執行,但刷新頁面、關閉瀏覽器不能執行;
- Safari 刷新頁面、頁面跳轉,關閉瀏覽器都會執行;
- Opera、Chrome任何情況都不執行。
綜上所述,onunload是無法阻止頁面的更新和關閉的,而 onbeforeunload 可以做到。但注意的是請求需要同步,我覺得應該是采用異步方法,那么瀏覽器會在方法成功發送並響應前先unload,從而導致請求丟失。如果采用的是同步方法,瀏覽器就會等待請求成功,然后再unload。
因為我項目的接口請求是用axios統一封裝代碼,而且沒找到方法讓axios的請求方法變成同步,所以我用了jQuery的ajax請求方法,代碼如下: