ブラウザのページ遷移前に「このサイトを離れますか」メッセージの制御

ブラウザでフォームなどを開いていて入力途中でページを移動しようとした時に表示されるメッセージの制御を調べたのでまとめておきます。

表示させるのは簡単で以下のコードをHTMLに挿入するだけ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.yahoo.co.jp">あああ</a>
<script>
window.onbeforeunload = function(e) {
e.preventDefault();
return '';
};
</script>
</body>
</html>

Chrome、Firefox、safariで表示されるダイアログは以下の通り。

Chromeのダイアログ
Firefoxのダイアログ
safariのダイアログ

なお、最新のChrome、Firefox、safariではメッセージの制御はできなくなっています。
IEのみメッセージのカスタマイズができます
※2019年1月17日現在

目次

参考

WindowEventHandlers.onbeforeunload(MDN web docs)
https://developer.mozilla.org/ja/docs/Web/API/WindowEventHandlers/onbeforeunload

よかったらシェアしてね!
  • URLをコピーしました!
目次