【JavaScript】ページ遷移する際に確認メーセージを表示する方法

2021年6月25日 2021年6月27日

こんにちは！CODE CLUB965のKです！

今回は、JavaScriptで別ページに遷移する際に確認メッセージを表示する方法について書こうと思います。

例えば、会員登録する際にフォームに入力している途中で間違ってリロードしてしまったことありませんか？
それでデータを再度入力しないといけない...なんて時があります。

そんな時に、ページ移動する直前で確認メーセージを表示してあげれば、ユーザーの誤操作を防止することができます。

ページ遷移前に確認メッセージのダイアログを表示する

ページ遷移前に確認のメッセージダイアログを表示するには、「beforeunloadイベント」を使用することで実現可能です。

「window.onbeforeunload」というイベントプロパティに確認用の処理を書けばOKです。

window.onbeforeunload = function(e) {
    e.returnValue = "このページを離れます。よろしいですか？";
}

window や document などリソースがアンロードされようする時に発生します。

ちなみに、上記の「e.returnValue」は、表示したいメッセージを設定することができますが、IE もしくは Edge の場合のみなので注意して下さい。

ChromeやFirefoxでは設定したメッセージは表示されず、定型文がメッセージダイアログに表示されます。

サンプルコード

以下にサンプルのコードを載せておきます。

<!DOCTYPE html>
<html>
<head></head>
<body>
<p><button id="set">メッセージを表示する</button></p>
<p><button onclick="window.onbeforeunload = null;">メッセージを表示しない</button></p>
<hr>
<p><a href="https://codeclub.commits.work/">別のページへ移動する(CODE CLUB965 TOPへ)</a></p>
<script type="text/javascript">
 document.getElementById( "set" ).onclick = function () {
	window.onbeforeunload = function(e) {
		e.returnValue = "このページを離れます。よろしいですか？" ;
	}
 }
</script>
</body>
</html>

デモすると面倒なことになるので、今回は「メッセージを表示する」のボタンを押すとページ遷移前にメッセージが表示されます。

逆に「メッセージを表示しない」のボタンを押すとページ移動しようとしてもメッセージは表示されません。
これは、「window.onbeforeunload = null;」を設定してあげればOKです。

上記のサンプルコードのデモは以下の通りです。

別のページへ移動する(CODE CLUB965 TOPへ)

こんな感じでユーザーの誤操作を防ぐことができるので親切ですね！

入力フォームなどの画面ではあった方が良いと思います。
ぜひ機会があれば試してみて下さい！

それでは、また！

Follow me!