Skip to content

Commit

Permalink
2023/10/26 時点の英語版に基づき更新
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 committed Nov 29, 2023
1 parent 8055d19 commit b55c808
Showing 1 changed file with 64 additions and 36 deletions.
100 changes: 64 additions & 36 deletions files/ja/web/api/window/unload_event/index.md
Original file line number Diff line number Diff line change
@@ -1,34 +1,16 @@
---
title: unload
title: "Window: unload イベント"
short-title: unload
slug: Web/API/Window/unload_event
l10n:
sourceCommit: 835d6632d59993861a0458510402787f8a2c3cb3
---

{{APIRef}}

`unload` イベントは、文書または子リソースがアンロードされるときに発生します。

<table class="properties">
<tbody>
<tr>
<th scope="row">バブリング</th>
<td>なし</td>
</tr>
<tr>
<th scope="row">キャンセル</th>
<td>不可</td>
</tr>
<tr>
<th scope="row">インターフェイス</th>
<td>{{domxref("Event")}}</td>
</tr>
<tr>
<th scope="row">イベントハンドラープロパティ</th>
<td>
{{domxref("WindowEventHandlers/onunload", "onunload")}}
</td>
</tr>
</tbody>
</table>
> **警告:** 開発者はこのイベントを使用するのを避けてください。下記の「使用上のメモ」を参照してください。
**`unload`** イベントは、文書または子リソースがアンロードされるときに発生します。

以下のイベントの後に発生します。

Expand All @@ -37,25 +19,65 @@ slug: Web/API/Window/unload_event

文書は以下のような状態にあります。

- すべてのリソースがまだ存在する (img、iframe など)
- すべてのリソースがまだ存在するimg、iframe など
- エンドユーザーから見えるものは何もない
- UI でのやり取りは効果がない ({{domxref("window.open")}}, {{domxref("window.alert", "alert")}}, {{domxref("window.confirm", "confirm")}}, など)
- UI 操作の効果がない({{domxref("window.open")}}, {{domxref("window.alert", "alert")}}, {{domxref("window.confirm", "confirm")}}, など
- エラーが発生しても、アンロードの処理の流れは停止しない

unload イベントは文書ツリーにも続くことに注意してください。親フレームのアンロードは、子フレームの `unload` の前に行われます (以下の例を参照)。
unload イベントは文書ツリーにも続くことに注意してください。親フレームのアンロードは、子フレームの `unload`****に行われます(以下の例を参照)。

## 構文

このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("unload", (event) => {});
onunload = (event) => {};
```

## イベント型

一般的な {{domxref("Event")}} です。

## イベントハンドラーの別名

`Window` インターフェイスに加えて、イベントハンドラープロパティ `onunload` は以下のターゲットでも利用できます。

- {{domxref("HTMLBodyElement")}}
- {{domxref("HTMLFrameSetElement")}}
- {{domxref("SVGSVGElement")}}

## 使用上のメモ

開発者はこのイベントを使用しないでください。

特にモバイルでは `unload` イベントが確実には発行されません。例えば、次の例では `unload` イベントはまったく発生しません。

1. モバイルユーザーがページにアクセスします。
2. その後、ユーザーが異なるアプリに切り替えます。
3. その後、ユーザーがアプリマネージャーからブラウザーを閉じます。

また、 `unload` イベントは[前方/後方キャッシュ](https://web.dev/articles/bfcache) (bfcache) と互換性がありません。このイベントを使用している多くのページは、イベントが発生した後はページが存在し続けないことを想定しているからです。これに対抗するため、いくつかのブラウザー(Firefox など)は unload リスナーがある場合、ページを bfcache に配置しませんが、これはパフォーマンスにとって悪いことです。他にも、 Chrome のように、ユーザーが操作しても `unload` を発行しないものもあります。

ユーザーのセッションの終わりを指示するために使用するのに最適なイベントは [`visibilitychange`](/ja/docs/Web/API/Document/visibilitychange_event) イベントです。 `visibilitychange` に対応していないブラウザーでは、 [`pagehide`](/ja/docs/Web/API/Window/pagehide_event) イベントが次善の選択肢となります。

ページのアンロードイベントを検出する場合は、 `pagehide` イベントを待ち受けするのがベストです。

`unload` イベントに関連する問題についての詳しい情報は、[ページライフサイクル API](https://developer.chrome.com/blog/page-lifecycle-api/#the-unload-event) ガイドを参照してください。

##

```html
<!doctype html>
<html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Parent Frame</title>
<script>
window.addEventListener("beforeunload", function (event) {
window.addEventListener("beforeunload", (event) => {
console.log("I am the 1st one.");
});
window.addEventListener("unload", function (event) {
window.addEventListener("unload", (event) => {
console.log("I am the 3rd one.");
});
</script>
Expand All @@ -70,14 +92,15 @@ unload イベントは文書ツリーにも続くことに注意してくださ

```html
<!doctype html>
<html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Child Frame</title>
<script>
window.addEventListener("beforeunload", function (event) {
window.addEventListener("beforeunload", (event) => {
console.log("I am the 2nd one.");
});
window.addEventListener("unload", function (event) {
window.addEventListener("unload", (event) => {
console.log("I am the 4th and last one…");
});
</script>
Expand All @@ -94,11 +117,16 @@ unload イベントは文書ツリーにも続くことに注意してくださ

{{Specifications}}

## ブラウザーの対応
## ブラウザーの互換性

{{Compat}}

## 関連情報

- 関連イベント: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/unload_event", "unload")}}
- 関連イベント: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}
- [Unloading Documents — unload a document](https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents)
- [`visibilitychange`](/ja/docs/Web/API/Document/visibilitychange_event) イベント
- [Don't lose user and app state, use Page Visibility](https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/) は、 `beforeunload`/`unload` ではなく、 `visibilitychange` を使用する理由について詳しく説明しています。
- [Page Lifecycle API](https://developer.chrome.com/blog/page-lifecycle-api/#developer-recommendations-for-each-state) は、ウェブアプリケーションでページのライフサイクル動作を処理するための最善の手法を提供します。
- [PageLifecycle.js](https://github.com/GoogleChromeLabs/page-lifecycle): ページのライフサイクル動作におけるブラウザー間の不整合に対処する JavaScript ライブラリーです。
- [Back/forward cache](https://web.dev/articles/bfcache) は前方/後方キャッシュとは何か、そして様々なページライフサイクルイベントに対するその意味について説明しています。

0 comments on commit b55c808

Please sign in to comment.