概要: このチュートリアルでは、ユーザーがWebページを離れる前に確認ダイアログを表示できるようにするJavaScriptのbeforeunloadイベントについて学びます。
JavaScript beforeunload イベントの概要
Webページとそのリソースがアンロードされる前に、beforeunloadイベントが発生します。このとき、Webページはまだ表示されており、イベントをキャンセルする機会があります。
beforeunloadイベントを登録するには、window.addEventListener()メソッドを使用します。
window.addEventListener('beforeunload',(event) =>{
// do something here
});Code language: JavaScript (javascript)windowはグローバルオブジェクトであるため、次のように省略できます。
addEventListener('beforeunload',(event) =>{
// do something here
});Code language: PHP (php)Webページにbeforeunloadイベントリスナーがあり、ページを離れようとすると、beforeunloadイベントによって、ページを離れるかどうかを確認する確認ダイアログがトリガーされます。
確認すると、ブラウザは新しいページに移動します。そうでない場合は、ナビゲーションをキャンセルします。
仕様によると、確認ダイアログを表示するには、beforeunloadイベントハンドラー内でpreventDefault()メソッドを呼び出す必要があります。ただし、すべてのブラウザがこれを実装しているわけではありません。
addEventListener('beforeunload',(event) => {
event.preventDefault();
});Code language: PHP (php)歴史的に、一部のブラウザでは、確認ダイアログにカスタムメッセージを表示することができました。これは、ユーザーが移動するとデータを失うことを通知することを目的としていました。残念ながら、この機能はユーザーをだますためによく使用されます。その結果、カスタムメッセージはサポートされなくなりました。
HTML仕様に基づいて、alert()、confirm()、およびprompt()の呼び出しは、beforeunloadイベントハンドラーでは無視されます。
JavaScript beforeunload イベントの例
次の例では、beforeunloadイベントにイベントハンドラーをアタッチします。別のページに移動するためにリンクをクリックすると、ブラウザは確認ダイアログを表示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS beforeunload Event</title>
</head>
<body>
<a href="https://javascripttutorial.dokyumento.jp/">JavaScript Tutorial</a>
<script>
window.addEventListener('beforeunload', (event) => {
event.preventDefault();
// Google Chrome requires returnValue to be set.
event.returnValue = '';
});
</script>
</body>
</html>Code language: HTML, XML (xml)まとめ
beforeunloadイベントは、Webページとそのリソースがアンロードされる直前に発生します。- データの損失を防ぐために、ユーザーがページを離れたいかどうかを確認するには、
beforeunloadを使用します。
