1. 程式人生 > >關閉瀏覽器事件 onbeforeunload和onunload

關閉瀏覽器事件 onbeforeunload和onunload

onu 點擊 替換 接口 文字 代碼 com ajax 表單

  在做畢設的時候,需要在關閉瀏覽器的時候向後臺服務器修改用戶在線狀態。首先講一下 onbeforeunload 和 onunload(都是在刷新或關閉時調用) 的區別:

(1)onbeforeunload:在即將離開當前頁面(刷新或關閉)時觸發,即正要去服務器讀取新的頁面時調用,此時還沒開始讀取。該事件可用於彈出對話框,提示用戶是繼續瀏覽頁面還是離開當前頁面。兼容方面如下:

  • IE、Safari 完美支持
  • Firefox、Chrome 不支持文字提醒信息
  • Opera 不支持

(2)onunload:在用戶退出頁面時發生,即已經從服務器上讀到了需要加載的新的頁面,在即將替換掉當前頁面時調用。該事件可用於當用戶離開頁面時發生的事件(通過點擊一個連接,提交表單,關閉瀏覽器窗口等等。)。兼容方面如下:

  • IE瀏覽器 頁面跳轉刷新頁面能執行,但關閉瀏覽器不能執行;
  • firefox 頁面跳轉能執行,但刷新頁面、關閉瀏覽器不能執行;
  • Safari 刷新頁面、頁面跳轉,關閉瀏覽器都會執行;
  • Opera、Chrome任何情況都不執行。

  綜上所述,onunload是無法阻止頁面的更新和關閉的,而 onbeforeunload 可以做到。但註意的是請求需要同步,我覺得應該是采用異步方法,那麽瀏覽器會在方法成功發送並響應前先unload,從而導致請求丟失。如果采用的是同步方法,瀏覽器就會等待請求成功,然後再unload。

  因為我項目的接口請求是用axios統一封裝代碼,而且沒找到方法讓axios的請求方法變成同步,所以我用了jQuery的ajax請求方法,代碼如下:

技術分享圖片

關閉瀏覽器事件 onbeforeunload和onunload