記事一覧

JavaScriptでページ移動前にアラートを表示する




目次



キーボードの誤入力によりWebページが予期せず移動してしまう問題

ハロー、みなさん。エジソンです。

大抵のブログサービスにおける管理機能は、Webブラウザからアクセスする”Webアプリケーション”として提供されているはずです。ブログ記事の投稿もWebブラウザから実行することでしょう。そんな中、ブログ記事を書いている最中に、誤ってブラウザの戻るボタンを押下することで、編集中の記事が保存されずに消失してしまう事は、誰もが一度は経験することではないでしょうか。

ブログサービスだけではなく、Webアプリケーションとして提供されている全てのサービスの場合に、こういった編集中の内容が失われてしまうような、問題が起きやすいのではないかと思います。

ネイティブアプリ市場ではユーザーが成熟している?

一方で、ネイティブアプリの場合にはこうした事故は発生しにくいかと思います。メモ帳やOffice製品の場合には、保存していない状態でウィンドウを閉じる操作が行われると、アラートを表示して保存するかどうかの最終確認を行ってくれます。

また、編集するたびに Ctrl + S を押してファイル保存をマメに実施するという習慣が、ユーザーに身に沁みているために、事故によるファイルの消失体験の確率が下げられている現状があるのではないかと思います。

JavaScriptでページ移動前のイベントを捕捉する

Webアプリケーションにおいても、ネイティブアプリと同様にユーザビリティを高める努力をするべきで、未保存時の確認アラートが表示されるような設計を行うべきか否かの判断を、常に念頭におくべきかと思います。

今回は、JavaScriptにおける実現手段を紹介します。

JavaScriptでは、ページ移動前のイベントを捕捉するイベントハンドラが提供されているという事実は、あまり知られていないのではないかと思います。

以下のようにして、ページ移動前のイベントを捕捉することができます。

windowに直接イベントハンドラを設定
window.onbeforeunload = function(e) {
  console.log('beforeunload');
  return 'window onbeforeunload';
};

jQuery経由でwindowにイベントハンドラを設定
$(window).on('beforeunload', function(event) {
	console.log('beforeunload');
	return 'jquery beforeunload';
});

いずれも、beforeunloadイベントにて、文字列を返却するとページ移動前に移動しても良いかのアラートが表示されるようになります。アラートを表示したくなければ、"return;"とすれば良いです。

window_onbeforeunload_dialog.png

jQueryを使用しない場合と使用した場合の方法を紹介しましたが、どちらも同様の動作が行われるわけではありませんので注意しなければなりません。次節で説明しますが、jQuery方式を選択するほうが汎用的であると思われます。

二箇所以上で、beforeunloadイベントを適用

二箇所以上で、beforeunloadイベントを設定して動作を確認してみましょう。

windowに直接イベントハンドラを設定
window.onbeforeunload = function(e) {
  console.log('beforeunload 1');
  return 'window onbeforeunload 1';
};

window.onbeforeunload = function(e) {
  console.log('beforeunload 2');
  return 'window onbeforeunload 2';
};

コンソール出力結果
window onbeforeunload 2

jQuery経由でwindowにイベントハンドラを設定
$(window).on('beforeunload', function(event) {
	console.log('beforeunload 1');
	return 'jquery beforeunload 1';
});

$(window).on('beforeunload', function(event) {
	console.log('beforeunload 2');
	return 'jquery beforeunload 2';
});

コンソール出力結果
jquery beforeunload 1
jquery beforeunload 2

コンソール出力結果を見ると分かるように、前者は一行しか出力がないのに対して、後者だと二行出力があるため、jQueryの場合には、複数のイベントハンドラが有効であることがわかりますね。

何故、jQueryの場合に複数のイベントハンドラが有効になっているかというと、jQueryのonでは、内部で addEventListener を使用しているため、複数のイベントハンドラが保持できるからでしょう。

このように、jQueryを使用したタイプの方が汎用的です。仮にbeforeunloadイベントが競合してしまった場合でも、jQueryの方が安心して動作させることができるはずです。

ちなみに、jQuery方式で二箇所以上でbeforeunloadイベントにて文字列が返却された場合には、Safari、Google Chromeでは、最後に返却された文字列がアラートに表示されました。他のブラウザでは未検証です。

まとめ

  • jQueryで、beforeunloadイベントを適用すると移動前のアラート表示が可能
  • ページ移動前にアラートしたい場合には return "表示したい文字列"; とする
  • 全てのブラウザでサポートされているので安心して使えそう(未確認です)
参考
MDN - onbeforeunload


関連記事

このエントリーをはてなブックマークに追加

コメント

コメントの投稿

非公開コメント

プロフィール

EZOLABブログへようこそ。
EZOLABは、札幌のソフトウェア会社です。

http://ezolab.co.jp