使用JavaScript處理瀏覽器關閉事件

在某些情況下，你可能不希望用戶關閉瀏覽器並退出會話。例如，如果用戶在填寫表單沒有保存，或者在還沒完成的付款交易中，他們嘗試關閉瀏覽器時，你可以提示用戶確認對話框。

以下是對話框在Chrome中的樣子：

在Firefox中：

這個功能可以通過在JavaScript中使用 beforeunload 事件來實現。將下面的代碼添加到你的網頁中：

window.addEventListener("beforeunload", (event) => {
  // 根據標準取消事件。
  event.preventDefault();
  // Chrome要求設置returnValue。
  event.returnValue = "";
});

請注意，只有在用戶與頁面有些許交互時，這個事件才會觸發。否則，這個功能將不會啟動。另外，用戶在以下三種情況下觸發事件：

用戶點擊關閉瀏覽器。
用戶點擊刷新頁面。
用戶點擊後退按鈕。

如果你想要移除這個確認對話框，例如在用戶已經保存表格或完成付款交易後，你可以這樣做：

window.removeEventListener("beforeunload", callback);

由於此對話框的主要目的是提醒用戶在離開之前保存他們的更改，所以沒有額外的事件監聽器來捕獲退出對話框的結果。換句話說，你無法確定用戶選擇了離開還是繼續留在頁面上。

要獲得更多信息，你可以查閱最新的MDN Web Docs： https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

繼續探索這個主題

Gatsby 前端 - 結合效能、效率與使用者體驗

我的部落格是用Gatsby前端框架建立。在今日步調迅速的數位環境中，提供高性能且帶有卓越使用者體驗的網站已成為企業和開發者的首要任務。其中一個最受歡迎的工具就是 Gatsby，一個基於 React 的尖端前端框架。Gatsby 結合了靜態網站的生成力量，React 元件及 GraphQL，創建出載入速度極快，且樂於使用的網站。在這篇部落格文章中，我們將…

Next.js - 用於構建現代網絡應用的React框架

我在週末參加了一個黑客松，我在其中使用了Next.js並發現它非常有用。在不斷演變的網絡開發景觀中，保持領先地位對於提供卓越的用戶體驗至關重要。近年來，Next.js這項技術的重要性顯著增長。Next.js由React和Rust工具鏈提供動力，是一個強大的框架，使開發人員能夠輕鬆地構建現代網絡應用程序。在這篇博客文章中，我們將探索Next.js的功能和…

在企業網路中設置npm代理

在企業網路下工作可能相當有挑戰性，因為許多東西不會即刻就能運作正常。像是 npm install 等簡易指令可能都無法正常運作。以下為如何跨過代理進行工作的方法：