網頁卸載事件主要通過 beforeunload 事件實現，1. 可用于防止數據丟失，如在用戶關閉或刷新頁面前提示保存未提交的表單數據；2. 使用時應謹慎，僅在必要場景如編輯文檔、上傳文件時觸發；3. 提示信息需簡潔明了，避免技術術語；4. 不應用于廣告等干擾用戶的行為；5. 在 spa 中可通過路由守衛或手動觸發實現；6. 測試時可使用手動測試、自動化工具或開發者工具命令；7. 移動端需注意兼容性、性能和提示信息限制。正確使用 beforeunload 事件可在保障用戶體驗的同時防止數據丟失。
網頁卸載事件，簡單來說，就是瀏覽器要關閉或者刷新的時候觸發的事件。它允許你在用戶離開頁面前做一些清理工作，或者給用戶一個挽留的機會。
beforeunload事件就是你需要的。
監聽頁面卸載主要通過 beforeunload 事件。
beforeunload事件應用場景如下：
防止數據丟失：使用beforeunload事件保存未提交的數據
想象一下，用戶在一個復雜的表單上填寫了大量信息，突然手滑關掉了瀏覽器。辛辛苦苦填寫的內容瞬間消失，這絕對是讓人崩潰的體驗。 beforeunload 事件就能派上大用場。
window.addEventListener('beforeunload', function (e) { // 檢查是否有未保存的數據 if (hasUnsavedData()) { // 自定義提示消息 e.preventDefault(); e.returnValue = ''; // 兼容性寫法，部分瀏覽器需要 return '您有未保存的數據，確定要離開嗎？'; } }); function hasUnsavedData() { // 這里實現檢查是否有未保存數據的邏輯 // 例如，檢查表單是否有修改，或者是否有正在上傳的文件 // 返回 true 表示有未保存的數據，false 表示沒有 // 這只是一個占位符，你需要根據你的實際情況來實現 return document.getElementById('my-form').dirty; // 假設表單有一個 dirty 屬性 }
這段代碼的核心在于 hasUnsavedData() 函數。你需要根據你的實際應用場景來實現這個函數，判斷是否有未保存的數據。例如，你可以檢查表單是否有修改，或者是否有正在上傳的文件。如果 hasUnsavedData() 返回 true，beforeunload 事件就會觸發，瀏覽器會彈出一個提示框，詢問用戶是否確定要離開。
需要注意的是，不同瀏覽器對 beforeunload 事件的處理方式可能略有不同。有些瀏覽器會忽略自定義的提示消息，只顯示默認的提示信息。為了提高兼容性，建議同時設置 e.returnValue = ”。
如何安全地使用 beforeunload 事件，避免濫用？
beforeunload 事件雖然強大，但如果使用不當，可能會給用戶帶來不好的體驗。頻繁彈出提示框，或者提示信息過于冗長，都會讓用戶感到厭煩。因此，在使用 beforeunload 事件時，一定要謹慎。
- 只在必要時使用： 只有在用戶可能丟失數據的情況下，才應該使用 beforeunload 事件。例如，在用戶正在編輯文檔、填寫表單、上傳文件等場景下。
- 提供清晰的提示信息： 提示信息應該簡潔明了，告訴用戶可能丟失的數據類型，以及是否確定要離開。避免使用過于技術化的術語，讓用戶能夠輕松理解。
- 允許用戶選擇： 提供一個選項，讓用戶可以選擇是否啟用 beforeunload 事件。例如，可以在設置中添加一個開關，讓用戶可以自由地開啟或關閉該功能。
- 避免濫用： 不要將 beforeunload 事件用于廣告、推廣等目的。這會嚴重影響用戶體驗，甚至可能被瀏覽器屏蔽。
如何在單頁應用 (SPA) 中使用 beforeunload 事件？
在單頁應用中，頁面不會真正地卸載，只是會切換不同的路由。因此，beforeunload 事件的行為與傳統的多頁應用有所不同。
在 SPA 中，beforeunload 事件仍然會觸發，但它的作用范圍僅限于當前路由。也就是說，當用戶在同一個路由下進行操作，然后嘗試離開頁面時，beforeunload 事件才會觸發。如果用戶只是在不同的路由之間切換，beforeunload 事件不會觸發。
如果你需要在 SPA 中監聽頁面卸載事件，可以使用以下方法：
- 使用路由守衛： 在路由守衛中，你可以檢查是否有未保存的數據，并提示用戶是否確定要離開。例如，在 vue router 中，你可以使用 beforeRouteLeave 守衛。
- 手動觸發 beforeunload 事件： 當用戶在同一個路由下進行操作，并且可能丟失數據時，你可以手動觸發 beforeunload 事件。例如，當用戶關閉一個彈窗時，你可以觸發 beforeunload 事件，提示用戶是否確定要關閉。
// Vue Router 的 beforeRouteLeave 守衛 beforeRouteLeave(to, from, next) { if (this.hasUnsavedData()) { const confirmLeave = window.confirm('您有未保存的數據，確定要離開嗎？'); if (confirmLeave) { next(); } else { next(false); } } else { next(); } }
如何測試 beforeunload 事件？
測試 beforeunload 事件可能會比較麻煩，因為你需要模擬頁面卸載的行為。以下是一些測試 beforeunload 事件的方法：
- 手動測試： 在瀏覽器中打開你的頁面，然后嘗試關閉瀏覽器窗口或刷新頁面。觀察是否會彈出提示框。
- 使用自動化測試工具： 使用 Selenium、Cypress 等自動化測試工具，可以模擬用戶的操作，自動測試 beforeunload 事件。
- 使用瀏覽器開發者工具： 在瀏覽器開發者工具中，你可以手動觸發 beforeunload 事件。在 chrome 開發者工具中，你可以使用 window.dispatchEvent(new Event(‘beforeunload’)) 命令來觸發 beforeunload 事件。
beforeunload事件在移動端有什么需要注意的地方？
移動端瀏覽器對 beforeunload 事件的支持可能與桌面端有所不同。一些移動端瀏覽器可能會忽略自定義的提示消息，只顯示默認的提示信息。此外，移動端瀏覽器的資源限制可能更嚴格，因此在使用 beforeunload 事件時，需要注意性能問題。
- 測試： 在不同的移動端瀏覽器上進行測試，確保 beforeunload 事件能夠正常工作。
- 性能： 避免在 beforeunload 事件處理函數中執行耗時的操作。這可能會導致頁面卡頓，影響用戶體驗。
- 兼容性： 使用兼容性寫法，確保 beforeunload 事件在不同的瀏覽器上都能正常工作。
- 用戶體驗： 提示信息應該簡潔明了，避免使用過于技術化的術語。
總的來說，beforeunload 事件是一個非常有用的工具，可以幫助你防止用戶丟失數據。但是，在使用 beforeunload 事件時，一定要謹慎，避免濫用，確保用戶體驗。
