[JavaScript] ページを離れる直前に処理を行う（onBeforeUnload）

投稿日：2018年4月19日更新日：2018年5月2日

ページを離れる直前に処理を行うには、onBeforeUnloadイベントハンドラを使用します。

サンプルソース

例）ページを離れる時に確認メッセージを出力する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページを離れる時に確認メッセージを表示するサンプル</title>
<script>
function mes(event){
  event.returnValue = "ページを離れます。よろしいですか？";
}

window.onbeforeunload = mes;
</script>
</head>
<body>
  <a href="http://www.google.co.jp">Googleに遷移します。</a>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ページを離れる時に確認メッセージを表示するサンプル</title>

function mes(event){

event.returnValue = "ページを離れます。よろしいですか？";

}

window.onbeforeunload = mes;

</script>

</head>

<body>

<a href="http://www.google.co.jp">Googleに遷移します。</a>

</body>

</html>

解説

event.returnValueに設定したメッセージは、ブラウザによっては表示されず、規定のメッセージが表示されるものもあります。
（例えばChromeは規定のメッセージのみ表示されます。IEは設定したメッセージが表示されます。）
Chromeのようにメッセージが表示されないブラウザでも、event.returnValueに何かしらの値を設定しないと確認ダイアログは表示されません。

執筆者：とら