勉強したことのメモ

webプログラマが勉強したことのメモ。

JavaScriptのbeforeunloadイベントでページの離脱防止

   

何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、誤ってページ遷移した場合、元のページに戻っても入力内容がリセットされる。

仮に入力ページ→入力内容確認ページと遷移していればセッション等で保存することは可能だけど、入力ページ→その他ページに遷移する際は保存することも難しい。

妥協案としてフォームページから離脱する場合は「入力内容は保存されません。ページ移動しますか?」といったようなアラートを表示させることになった。以下に方法をメモ。

 

beforeunloadイベントを使う

調べてみると以下beforeunloadイベントを使うのが良さそう。

https://developer.mozilla.org/ja/docs/Web/API/Window/beforeunload_event

注意点としてアラート内の「入力内容は保存されません。ページ移動しますか?」等のメッセージはIEのみ変更可能。他ブラウザは変更不可。

 

離脱のみを防ぐ場合

$(function(){
	$(window).on('beforeunload', function() {
		return '入力内容は保存されません。ページ移動しますか?';
	});
});

 

フォームと組み合わせ

$(function(){
	$(window).on('beforeunload', function() {
		return '入力内容は保存されません。ページ移動しますか?';
	});
	$('button[type=submit]').on('click', function(){
		$(window).off('beforeunload');
	});
});

調べたところ上記の形がよく見受けられたがバリデートを挟む場合、「submitボタンクリック→バリデートでNG」になった時点でbeforeunloadイベントが削除される。

そうすると「submitボタンクリック→バリデートでNG→適当なリンクをクリック」とした場合、beforeunloadイベントが発火せずページ遷移してしまう。

その為、バリデートを挟むのであれば以下のような形で対応する。

$(function(){
	$(window).on('beforeunload', function() {
		//登録ボタンクリック時は無効
		$("#submit-btn").on("click", function(){
			return false;
		});
		return '入力内容は保存されません。ページ移動しますか?';
	});
});

//バリデート
function validate(){

	//何らかのバリデート処理

	//問題ない場合はbeforeunloadイベントを無効
	$(window).off('beforeunload');

	//フォーム送信
	$('#regist_form').submit();

	//IEの二重送信対策
	return false;
}

 

所感

本機能実装の為に複数記事を調べたが、beforeunloadイベントはブラウザの種類やバージョンにより動いたり動かなかったりと動作が不安定っぽい印象を受けた。

基本的に本機能の実装は見送るのが無難かもしれない。とはいえ要望を受けると実装するしかないのでその場合は動作が不安定っぽい旨は最初に伝えた方が良さそう。

 - jQuery, JavaScript

  関連記事

POP広告をjQueryで再現する方法

サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...

jQueryのappendとprepend

よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...

jQueryのプラグインでカラーコードを視覚的に選択

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア

タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...

javascriptでブラウザ判別&ページ遷移

var userAgent = window.navigator.userAge ...

Android2.3でJavaScriptのエラー

Android2.3で関数が動かないといったエラーが発生していた。 担当外だった ...

JavaScriptでcookieの保存

JavaScriptでcookieを保存したかったけど 方法が分からなかったので ...

jQueryでIPから位置情報の取得

jQueryのプラグインでお手軽にIPから 位置情報や経度緯度等調べられたのでメ ...

jQueryで年月日と時間のピッカー(datetimepicker)

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...

JavaScriptでURLのクエリを取得する2

直近で調べたのとは別に、 http://aaa.bbb/ccc/id123?te ...