• onbeforeunloadの解説
• onbeforeunloadの使い方
• onbeforeunloadの例
• onunloadの解説
• onunloadの使い方
• onunloadの例
• 注意点
• その他の使用例
• まとめ

onbeforeunloadの解説

onbeforeunloadは、ユーザーが現在のページを離れる直前に発生するイベントをハンドリングするためのイベントハンドラです。これにより、ページが閉じられたり、リロードされたり、別のURLに移動する際に何らかのアクションを実行できます。

主に以下の目的で使用されます:

• 未保存のデータをユーザーに警告する。
• 重要なアクションをキャンセルできるようにする。
• アプリケーションのセッション状態を保存する。

onbeforeunloadの使い方

onbeforeunloadは、以下の方法で使用できます:

window.onbeforeunload = function(event) {
    event.preventDefault();
    event.returnValue = "変更が保存されていません。ページを離れますか？";
};

onbeforeunloadの例

以下は、フォームに入力がある場合に警告を表示する例です:

let isFormDirty = false;

document.querySelector("form").addEventListener("input", function() {
    isFormDirty = true;
});

window.onbeforeunload = function(event) {
    if (isFormDirty) {
        event.preventDefault();
        event.returnValue = "入力内容が保存されていません。ページを離れますか？";
    }
};

onunloadの解説

onunloadは、ページが完全にアンロードされる（つまり閉じられるか移動される）際に発生するイベントをハンドリングします。このイベントは、リソースを解放したり、サーバーに最後のアクションを記録したりするために利用されます。

主な用途は以下の通りです:

• サーバーに「ページを離れた」通知を送信する。
• リソース（WebSocket、API接続など）を解放する。
• カスタムログを記録する。

onunloadの使い方

onunloadの基本的な使用例は以下の通りです:

window.onunload = function() {
    console.log("ページが閉じられました。");
};

onunloadの例

以下は、サーバーにログアウトリクエストを送信する例です:

window.onunload = function() {
    navigator.sendBeacon("/logout", JSON.stringify({ user: "user123" }));
};

注意点

onbeforeunloadとonunloadを使用する際には、以下の点に注意してください:

• ブラウザによって動作が異なる場合があります。特にonbeforeunloadの警告メッセージは、ほとんどのブラウザでカスタマイズが制限されています。
• 過剰な使用は、ユーザー体験を損なう可能性があります。これらのイベントは、本当に必要な場合にのみ使用するべきです。
• モバイルブラウザでは、一部の動作が正確にサポートされない場合があります。

その他の使用例

以下は、さらにいくつかのユースケースの例です:

onbeforeunloadとonunloadの併用

let startTime = Date.now();

window.onbeforeunload = function(event) {
    const elapsed = Date.now() - startTime;
    console.log("ページ滞在時間:", elapsed, "ms");
    return "このページを離れますか？";
};

window.onunload = function() {
    console.log("ページを閉じました。");
};

WebSocketのクリーンアップ

const socket = new WebSocket("wss://example.com/socket");

window.onunload = function() {
    socket.close();
};

まとめ

onbeforeunloadとonunloadは、それぞれ特定の条件下で非常に便利なイベントハンドラですが、適切な使用が求められます。ユーザー体験を損なわずに実装することが重要です。