1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
---
title: WindowEventHandlers.onbeforeunload
slug: Web/API/WindowEventHandlers/onbeforeunload
tags:
- API
- DOM
- Event Handler
- Property
- Reference
- Window
- イベントハンドラー
- プロパティ
translation_of: Web/API/WindowEventHandlers/onbeforeunload
---
<div>{{APIRef("HTML DOM")}}</div>
<p><code><strong>onbeforeunload</strong></code> は {{domxref("WindowEventHandlers")}} ミックスインのプロパティで、 {{event("beforeunload")}} イベントを処理する {{event("Event_handlers")}} です。このイベントはウィンドウでリソースを {{event("unload")}} しようとするときに発生します。この時点では文書はまだ表示されており、イベントはキャンセル可能な状態です。</p>
<div class="note">
<p><strong>メモ:</strong> ブラウザーによっては不要なポップアップを防ぐために、ページで操作が行われない限り、 <code>beforeunload</code> イベントハンドラーの中で作られたプロンプトを表示しないことがあります。さらに、ブラウザーによっては全く表示しないかもしれません。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox">window.addEventListener("beforeunload", function(event) { ... });
window.onbeforeunload = function(event) { ... };</pre>
<p>ふつうは、 {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} および {{event("beforeunload")}} イベントを使用したほうが <code>onbeforeunload</code> を使用するよりも適切です。</p>
<h2 id="Example" name="Example">例</h2>
<p>この例では、ページの終了前にユーザーに確認を取ります。</p>
<p>HTML 仕様書は、ユーザーに確認を取るときに {{domxref("Event.returnValue")}} メソッドの代わりに {{domxref("Event.preventDefault()")}} メソッドを使用するよう明記しています。しかし、これはまだすべてのブラウザーが対応しているわけではありません。</p>
<pre class="brush:js">window.addEventListener('beforeunload', function (e) {
// イベントをキャンセルする
e.preventDefault();
// Chrome では returnValue を設定する必要がある
e.returnValue = '';
});
</pre>
<h2 id="Notes" name="Notes">メモ</h2>
<p>ページが JavaScript を使用してコンテンツを表示している場合、ページを離れて元に戻ったときに JavaScript が停止することがあります。 <code>window.onbeforeunload</code> をバインドすることで、ブラウザーがページを完全にキャッシュすることを防ぐことができます。そうすると、ページ内の JavaScript は、次回の訪問時に起動され、必要に応じてコンテンツを更新します。</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<p>このイベントは最初に Microsoft Internet Explorer 4 で導入され、HTML5 仕様で標準化されました。</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#handler-window-onbeforeunload', 'onbeforeunload')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("api.WindowEventHandlers.onbeforeunload")}}</p>
<p>HTML 仕様書は、ユーザーに確認を取るときに {{domxref("Event.returnValue")}} メソッドの代わりに {{domxref("Event.preventDefault()")}} メソッドを使用するよう明記しています。しかし、これはまだすべてのブラウザーが対応しているわけではありません。</p>
<p>このイベントが <code>null</code> でも <code>undefined</code> でもない値を返した場合 (または <code>returnValue</code> プロパティに設定した場合)、ユーザーに対してページが終了することの確認が行われます。古いブラウザーでは、イベントの返値がダイアログに表示されます。 Firefox 44, Chrome 51, Opera 38, Safari 9.1 以降では、次のように、文字列の返値ではなく、ウェブページからは制御できない一般化された文字列が表示されます。</p>
<ul>
<li>例えば、 Firefox では "This page is asking you to confirm that you want to leave - data you have entered may not be saved." (このページが本当にページから離れるかどうかを確認しています。 - 入力されたデータは保存されない可能性があります) という文字列が表示されます ({{bug("588292")}} を参照)。</li>
<li>Chrome では "Do you want to leave this site? Changes you made may not be saved" (サイトを離れますか？変更が保存されない可能性があります) という文字列が表示されます (<a href="https://www.chromestatus.com/feature/5349061406228480">Chrome Platform Status</a> を参照)。</li>
</ul>
<p>Internet Explorer は <code>null</code> の返値を尊重せず、テキストとして "null" をユーザーに表示します。プロンプトをスキップするには、 <code>undefined</code> を使用する必要があります。</p>
<p>ブラウザーによっては、このイベント内での {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, {{domxref("window.prompt()")}} の呼び出しは無視される可能性があります。詳しくは <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">HTML 仕様書</a>を参照して下さい。</p>
<p>また、様々なブラウザーがイベントの結果を無視し、ユーザーにまったく確認を取らないことがあります。このような場合、文書は常に自動的にアンロードされます。 Firefox では <a>about:config</a> の中に <code>dom.disable_beforeunload</code> という名前のスイッチがあり、この動作を有効にすることができます。Chrome 60 時点では、フレームまたはページが読み込まれてからユーザーが何も操作を行っていない場合、確認は行われません。</p>
|
