Window: unload 事件
已棄用：此特性不再推薦。雖然某些瀏覽器可能仍然支援它，但它可能已經從相關的網路標準中刪除，可能正在刪除過程中，或者可能僅為相容性目的而保留。請避免使用它，如果可能，請更新現有程式碼；請參閱本頁底部的相容性表格以指導您的決策。請注意，此特性可能隨時停止工作。
警告：開發者應避免使用此事件。請參閱下面的“使用注意事項”。
當文件或子資源被解除安裝時，會觸發 unload 事件。
它在以下情況後觸發：
beforeunload(可取消事件)pagehide
文件處於以下狀態：
- 所有資源仍然存在（圖片、iframe 等）
- 終端使用者不再能看到任何內容
- UI 互動無效（
window.open、alert、confirm等） - 錯誤不會停止解除安裝流程
請注意，unload 事件也遵循文件樹：父框架的 unload 將在子框架的 unload 之前發生（請參閱下面的示例）。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
addEventListener("unload", (event) => { })
onunload = (event) => { }
事件型別
一個通用的 Event。
事件處理程式別名
除了 Window 介面，事件處理程式屬性 onunload 也可在以下目標上使用：
用法說明
開發者應避免使用此事件。
特別是在移動裝置上，unload 事件並非總是可靠觸發。例如，在以下場景中，unload 事件根本不會觸發：
- 移動使用者訪問您的頁面。
- 使用者隨後切換到不同的應用程式。
- 稍後，使用者從應用程式管理器關閉瀏覽器。
此外，unload 事件與前進/後退快取 (bfcache) 不相容，因為許多使用此事件的頁面假定在事件觸發後頁面將不再存在。為了解決這個問題，一些瀏覽器（例如 Firefox）如果頁面有 unload 監聽器，就不會將頁面放入 bfcache，這不利於效能。其他瀏覽器，例如 Chrome，在使用者離開時不會觸發 unload。
用於表示使用者會話結束的最佳事件是visibilitychange 事件。在不支援 visibilitychange 的瀏覽器中，次佳替代方案是pagehide 事件，它也並非可靠觸發，但與 bfcache 相容。
如果您特別嘗試檢測頁面解除安裝事件，最好監聽 pagehide 事件。
有關與 unload 事件相關問題的更多資訊，請參閱頁面生命週期 API 指南。
示例
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Parent Frame</title>
<script>
window.addEventListener("beforeunload", (event) => {
console.log("I am the 1st one.");
});
window.addEventListener("unload", (event) => {
console.log("I am the 3rd one.");
});
</script>
</head>
<body>
<iframe src="child-frame.html"></iframe>
</body>
</html>
下面是 child-frame.html 的內容
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Child Frame</title>
<script>
window.addEventListener("beforeunload", (event) => {
console.log("I am the 2nd one.");
});
window.addEventListener("unload", (event) => {
console.log("I am the 4th and last one…");
});
</script>
</head>
<body>
☻
</body>
</html>
當父框架解除安裝時，事件將按照 console.log() 訊息中描述的順序觸發。
規範
| 規範 |
|---|
| HTML # event-unload |
| HTML # handler-window-onunload |
瀏覽器相容性
載入中…
另見
- 相關事件：
DOMContentLoaded、readystatechange、load - 解除安裝文件 — 解除安裝文件
visibilitychange事件。- 不要丟失使用者和應用程式狀態，請使用頁面可見性詳細解釋了為什麼要使用
visibilitychange，而不是beforeunload/unload。 - 頁面生命週期 API 提供了關於如何在 Web 應用程式中處理頁面生命週期行為的最佳實踐指導。
- PageLifecycle.js：一個處理頁面生命週期行為中跨瀏覽器不一致的 JavaScript 庫。
- 往返快取 解釋了往返快取是什麼，以及它對各種頁面生命週期事件的影響。